Cuando creo un degradado radial en HTML Canvas, no se ve totalmente suave, puedes ver los círculos visibles (Firefox 96.0.3):

Quiero que el degradado sea totalmente suave (me pregunto por qué esa no es la visualización predeterminada para el degradado).

Aquí está el código que estoy usando:

 // HTML <canvas width="1000" height="1000"></canvas> // JS const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); var grd = ctx.createRadialGradient(500, 500, 0, 500, 500, 1000); grd.addColorStop(0, '#444444'); grd.addColorStop(1, '#000000'); ctx.fillStyle = grd; ctx.fillRect(0, 0, canvas.width, canvas.height);

Encontré una solución aquí , pero tiene más de 200 líneas de código, y me preguntaba si es posible un degradado radial más suave con algunas propiedades o métodos de Canvas incorporados.

Gracias por sus opiniones.