HTML Canvas Radial Gradients
The createRadialGradient() Method
The createRadialGradient() method is used to define a
radial/circular gradient.
A radial gradient is defined with two imaginary circles: a start circle and an end circle. The gradient starts with the start circle and moves towards the end circle.
The createRadialGradient() method has the following parameters:
| Parameter | Description |
|---|---|
| x0 | Required. The x-coordinate of the start circle |
| y0 | Required. The y-coordinate of the start circle |
| r0 | Required. The radius of the start circle |
| x1 | Required. The x-coordinate of the end circle |
| y1 | Required. The y-coordinate of the end circle |
| r1 | Required. The radius of the end circle |
The gradient object requires two or more color stops.
The addColorStop() method specifies the color stops, and its position along
the gradient. The positions can be anywhere between 0 and 1.
To use the gradient, assign it to the fillStyle or
strokeStyle property, then draw the shape (rectangle, circle, shape, or text).
Example
Create a radial/circular gradient with two color stops; a light blue color for the start circle of the gradient, and a dark blue color for the end circle. The center of the start circle is placed in position (150,75), with a radius of 15 px. The center of the end circle is placed in position (150,75), with a radius of 150 px. Then, fill the rectangle with the gradient:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create gradient
const grad=ctx.createRadialGradient(150,75,15,150,75,150);
grad.addColorStop(0,"lightblue");
grad.addColorStop(1,"darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
Try it Yourself »
Example
Here we set the radius of the end circle to a smaller number (100), and we see that the radial/circular gradient will be smaller:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create gradient
const grad=ctx.createRadialGradient(150,75,15,150,75,100);
grad.addColorStop(0,"lightblue");
grad.addColorStop(1,"darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
Try it Yourself »
Example
Here we move the center point of the end circle to get a new look:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create gradient
const grad=ctx.createRadialGradient(150,75,15,180,95,100);
grad.addColorStop(0,"lightblue");
grad.addColorStop(1,"darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
Try it Yourself »
Example
Here we add one more color-stop to the gradient to get a new look:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create gradient
const grad=ctx.createRadialGradient(150,75,15,150,75,150);
grad.addColorStop(0,"lightblue");
grad.addColorStop(0.3,"pink");
grad.addColorStop(1,"darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
Try it Yourself »
