Draw a rectangle and fill with a radial/circular gradient:
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="180" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var grd = ctx.createRadialGradient(75, 50, 15, 100, 60, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); ctx.fillStyle = grd;//from www . j a va2 s .com ctx.fillRect(10, 10, 150, 100); </script> </body> </html>
The createRadialGradient() method creates a radial/circular gradient object.
The gradient can be used to fill rectangles, circles, lines, text, etc.
Use this object as the value to the strokeStyle or fillStyle properties.
Use the addColorStop() method to specify different colors.
context.createRadialGradient(x0, y0, r0, x1, y1, r1);
Parameter Values
| Parameter | Description |
|---|---|
| x0 | The x-coordinate of the starting circle of the gradient |
| y0 | The y-coordinate of the starting circle of the gradient |
| r0 | The radius of the starting circle |
| x1 | The x-coordinate of the ending circle of the gradient |
| y1 | The y-coordinate of the ending circle of the gradient |
| r1 | The radius of the ending circle |