Radial gradients
Radial gradients can be used in place of regular color definitions to add
gradients to your canvas
. They're different to linear
gradients because they're circular in nature, as the name suggests. They're
specified using
the gradient api
and can consist of multiple colors. The
createRadialGradient
function is used to create the gradient and then
the addColorStop
function is used to add points along the
gradient - similar to linear gradients.
Arguments to the function
- The X1 coordinate
- The Y1 coordinate
- The R1 coordinate (radius)
- The X2 coordinate
- The Y2 coordinate
- The R2 coordinate (radius)
An example
<script>
window.onload = function ()
{
var canvas = document.getElementById('cvs');
var context = canvas.getContext('2d');
// Create the gradient
var gradient = context.createRadialGradient(175,75,0,175,75,100);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'rgb(255,125,125)');
context.beginPath();
context.fillStyle = gradient
context.arc(125,125,100,0,Math.PI * 2, false);
context.fill();
}
</script>
See also