# How to draw a circular gradient in HTML5?

HTMLWeb DevelopmentFront End Technology

This method returns a CanvasGradient object that represents a radial gradient that paints along the cone given by the circles represented by the arguments. The first three arguments define a circle with coordinates (x1,y1) and radius r1 and the second a circle with coordinates (x2,y2) and radius r2.

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

S.No
Parameter & Description
1
x0
x-coordinate- Starting point of the gradient
2
y0
y- coordinate - Starting point of the gradient
3
r0
4
x1
x-coordinate - Ending point of the gradient
5
y1
y- coordinate - Ending point of the gradient
6
r1

You can try to run the following code to learn how to draw a radial/circular gradient in HTML5 −

<!DOCTYPE html>
<html>

<body>
<canvas id="newCanvas" width="450" height="250" style="border:1px solid
#d3d3d3;"></canvas>
<script>
var c = document.getElementById("newCanvas");
var ctxt = c.getContext("2d");
</html>