Canvas Create Radial Gradients

Last Updated:

How to Create a Radial Gradient

Your browser does not support the canvas element.

To create a radial gradient, follow these steps

  1. canvas - Assigning the canvas element to a variable.
  2. ctx - Assigning the 2d rendering context to another variable by calling the getContext('2d') method.
  3. grad - Creating a new CanvasGradient object using createRadialGradient() canvas method, then assigning it to a variable.
  4. addColorStop() - Use addColorStop() canvas method to add a new color stop, defined by an offset and a color.
  5. fillStyle - Use fillStyle canvas property to specify the gradient to use inside shapes (any shape).
  6. fillRect() - Use fillRect() canvas method to draws a rectangle that is filled according to the current fillStyle.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <canvas id="point" width="210" height="110"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById("point"); var ctx = canvas.getContext("2d"); // Create gradient var grad = ctx.createRadialGradient(100, 50, 5, 90, 60, 100); grad.addColorStop(0, "black"); grad.addColorStop(1, "gold"); // Fill with gradient ctx.fillStyle = grad; ctx.fillRect(0, 0, 200, 100); </script> </body> </html>

Syntax

ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)

Attributes Value

ValueExplanation
x0 Specifies the x-axis coordinate of the start circle.
y0 Specifies the y-axis coordinate of the start circle.
r0 Specifies the radius of the start circle. Must be non-negative and finite.
x1 Specifies the x-axis coordinate of the end circle.
y1 Specifies the y-axis coordinate of the end circle.
r1 Specifies the radius of the end circle. Must be non-negative and finite.

Share this Page

Meet the Author