HTML and CSS Reference
In-Depth Information
Note that before you draw the shape, you reset the path to ensure that you do not apply
these changes to previously rendered parts of the drawing.
To create a radial gradient using
createRadialGradient(
x1
,
y1
,
r1
,
x2
,
y2
,
r2
)
, you
must set the position and radius of two circles to serve as the gradient. You add color stops
in the same manner as the linear gradient, so the code looks quite similar otherwise:
var rg = context.createRadialGradient(350,300,80,360,250,80);
rg.addColorStop(0,"#A7D30C");
rg.addColorStop(0.9,"#019F62");
rg.addColorStop(1,"rgba(1,159,98,0) ");
context.fillStyle = rg;
context.beginPath();
context.fillRect(250,150,200,200);
The complete example, drawing a few different shapes with fills and styles, is presented
here:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
HTML5 canvas lines and shapes example
</title>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeStyle = "blue";
context.fillStyle = "red";
context.lineWidth = 10;
context.beginPath();
context.lineTo(200,10);
