Question

How to use createRadialGradient() to create a circle with start and end points of gradient colors in JavaScript

Answer 1

<canvas id="canvas" width="1024" height="600"></canvas>

<script type="text/JavaScript">   

var ctx = document.getElementById('canvas').getContext('2d');

// CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
  
var gradient = ctx.createRadialGradient(80, 80, 80, 120, 120,0);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"blue");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 180, 180);

</script>

 

70+ SQL courses for beginners and professionals