HTML and CSS Reference
In-Depth Information
radialGradient.addColorStop(1,"#000");
ctx.fillStyle = linearGradient;
ctx.fillRect(0,0,200,400);
ctx.fillStyle = radialGradient;
ctx.fillRect(200,0,200,400);
var patternCanvas = $("<canvas width='20' height='20'>")[0],
patternCtx = patternCanvas.getContext("2d")
patternCtx.fillStyle = "#777";
patternCtx.fillRect(0,0,10,10);
patternCtx.fillStyle = "#FFF";
patternCtx.fillRect(10,10,10,10);
ctx.fillStyle = ctx.createPattern(patternCanvas,"repeat");
ctx.fillRect(400,0,200,400);
</script>
The code creates a Canvas that is 600 pixels wide and 400 pixels tall and draws three rectangles each with a
different fill. The first contains a linear gradient, the second a radial gradient, and the third a simple pattern fill
created from an offscreen 20 x 20 canvas element.
The gradients are created with positions relative to the entire canvas and not the individual rectangle. This
means that moving the
fillRect
results in a shifting of the gradient on the rectangle. If you need to use a
gradient on a sprite, you need to use the translate, rotate, and scale methods described in “Using the Canvas
Transformation Matrix
”
to move elements around that contain gradients rather than drawing them at particular
canvas positions.
Setting the Stroke Details
Although gradients and patterns work on both strokes and fills, a number of stroke-specific settings enable you
to control how the line that defines the stroke is drawn. These properties are:
// Sets the line width in current units (default 1)
ctx.lineWidth = width;
// Sets the cap style on the end of lines
// possible values are "butt", "round", "square" (default "butt")
ctx.lineCap = "butt";
// Sets the style at corners between two lines
// possible values are "round", "bevel", "miter" (default "miter")
ctx.lineJoin = "miter";
// Sets the max size of a miter join in current units
