HTML and CSS Reference
In-Depth Information
ctx.fillStyle = linearGradient;
ctx.fillStyle = radialGradient;
var patternCanvas = $("<canvas width='20' height='20'>")[0],
patternCtx = patternCanvas.getContext("2d")
patternCtx.fillStyle = "#777";
patternCtx.fillStyle = "#FFF";
ctx.fillStyle = ctx.createPattern(patternCanvas,"repeat");
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
Search WWH ::

Custom Search