createRadialGradient
Summary
Returns a radial CanvasGradient initialized with the two specified circles. This effectively creates a cone, touched by the two circles defined in the creation of the gradient, with the part of the cone before the start circle (0.0) using the color of the first offset, the part of the cone after the end circle (1.0) using the color of the last offset, and areas outside the cone (untouched by the gradient) transparent black.
Method of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D
Syntax
var object = object.createRadialGradient(x0, y0, r0, x1, y1, r1);
Parameters
x0
- Data-type
- Number
The x-coordinate of the starting circle of the gradient.
y0
- Data-type
- Number
The y-coordinate of the starting circle of the gradient.
r0
- Data-type
- Number
The radius of the starting circle.
x1
- Data-type
- Number
The x-coordinate of the ending circle of the gradient.
y1
- Data-type
- Number
The y-coordinate of the ending circle of the gradient.
r1
- Data-type
- Number
The radius of the ending circle.
Return Value
Returns an object of type DOM NodeDOM Node
A CanvasGradient object that represents the radial gradient.
Examples
This example creates a radial gradient, fading from yellow to red, and then places a rectangle filled with the gradient onto the canvas.
<canvas id="myCanvas" width="300" height="150" style="border:1px solid blue;"></canvas>
<p>. . .</p>
<script>
var can = document.getElementById("myCanvas");
var ctxt = can.getContext("2d");
var grdt = ctxt.createRadialGradient(150, 75, 10, 100, 50, 150);
grdt.addColorStop(0, "yellow");
grdt.addColorStop(1, "red");
ctxt.fillStyle = grdt;
ctxt.fillRect(10, 10, 275, 125);
</script>
Notes
You can use radial gradients together with the fillText or fillRect method.
Related specifications
- W3C HTML Canvas 2D Context
- W3C Candidate Recommendation
Attributions
Microsoft Developer Network: Windows Internet Explorer API reference Article