When I create a radial gradient on HTML Canvas, it doesn't look totally smooth, you can see the visible circles (Firefox 96.0.3):

I want the gradient to be totally smooth (I wonder why that is not the default display for the gradient).

Here is the code I am using:

// 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);

I found a solution here, but it has more than 200 lines of code, and I was wondering if a smoother radial gradient is possible with some in-built Canvas properties or methods.

Thanks for your opinions.