HTML and CSS Reference
In-Depth Information
style the drawing, you can specify the
fillStyle
and
strokeStyle
and maybe even
define the width of the line using
lineWidth
, as shown in this example:
context.strokeStyle = "blue";
context.fillStyle = "red";
context.lineWidth = 10;
context.beginPath();
context.lineTo(200,10);
context.lineTo(200,50);
context.lineTo(380,10);
context.closePath();
context.stroke();
context.fill();
As you saw in a few previous examples, you can change color by setting the
fillColor
property. In addition to the CSS color values, you can also set the
fillColor
to a gradient
object. A gradient object can be created by using
createLinearGradient()
or
createRadialGradient()
.
The following example creates a simple linear gradient that will be applied to a rectangle
using the
createLinearGradient(
x1
,
y1
,
x2
,
y2
)
method. The gradient is positioned at
10,150 and is set to go 200 pixels in both directions.
var lg = context.createLinearGradient(10,150,200,200);
Next, the gradient colors are added using the
addColorStop()
method. This specifies
a color and the offset position in the gradient where the color should occur. The offset must
be between 0 and 1.
lg.addColorStop(0,"#B03060");
lg.addColorStop(0.75,"#4169E1");
lg.addColorStop(1,"#FFE4E1");
Of course, you could use the
rgba
CSS function to create a gradient with transparency
as well. Finally, the
fillColor
is set to the gradient. Here is the complete code snippet,
followed by a visual example:
var lg = context.createLinearGradient(10,150,200,200);
lg.addColorStop(0,"#B03060");
lg.addColorStop(0.5,"#4169E1");
lg.addColorStop(1,"#FFE4E1");
context.fillStyle = lg;
context.beginPath();
context.rect(10,150,200,200);
context.fill();