Page 1 of 3
Now available as a paperback or ebook on Amazon.
- Getting started with Canvas
- Plot paths
Extract: Basic paths
Extract: Bézier curves
- Outline and fill
Extract: Line properties
Extract: Filling and holes
Extract: Personalized contact details
Extract the state of the graphics **NEW!
Extract: Text, Typography & SVG
- Cutting, composition and effects
Extract: Clipping & Basic Compositing
- Generating bitmaps
Extract: Introduction to bitmaps
- WebWorkers & OffscreenCanvas
Extract: Bit manipulation
- Typed arrays
- Files, blobs, urls and fetch
Extract: Blobs and files
Extract: Read / write local files
- Image processing
Extract: The Filter API
- WebGL 3D
- 2D WebGL
Extract: WebGL Convolutions
In the chapter but not in this excerpt
- Line and fill color
- Line properties
- Anti aliasing
- Fill, outline and painter’s algorithm
- Holes and filling
In addition to solid colors, you can also define fills which are gradients between a range of colors in linear and radial configurations. Although these are described here as fills, they can be applied to fillStyle or strokeStyle.
A linear gradient is created using:
where x1, y1 and x2, y2 are the start and end points of the gradient line. The gradient line gives the angle at which the gradient is located and the distance over which the colors change. To specify the actual colors involved, you must define any number of color stops:
where color specifies the color and p the proportion along the gradient line in which the color is applied, i.e. 0 is the start point, 1 is the end point and 0.5 is the midpoint .
var gradient = ctx.createLinearGradient(0, 0, 400, 0); gradient.addColorStop(0, 'green'); gradient.addColorStop(1, 'red');
defines a gradient starting at 0.0 and ending at 400.0. The color at 0.0 is green and at 400.0 is red. Note that the gradient is defined relative to the global coordinate system and not relative to a path to which you might apply it. As a demonstration, consider drawing a set of rectangles each offset in the x direction:
var path1 = new Path2D(); path1.rect(0, 0, 400, 100); path1.rect(100, 110, 400, 100); path1.rect(200, 220, 400, 100); path1.rect(300, 330, 400, 100); path1.rect(400, 440, 400, 100); var gradient = ctx.createLinearGradient(0, 0, 400, 0); gradient.addColorStop(0, 'green'); gradient.addColorStop(1, 'red'); ctx.fillStyle = gradient; ctx.fill(path1);
Note that only the first rectangle is filled with the full gradient. The final rectangle is just red because it is beyond the end point of the gradient.
You can think of this as setting a gradient across the entire canvas and whatever you fill in gets the part of the gradient in its location.
Setting more than one color breakpoint facilitates some special effects. For example:
var path1 = new Path2D(); path1.rect(0, 0, 400, 100); var gradient = ctx.createLinearGradient(0, 0, 400, 0); gradient.addColorStop(0, 'darkred'); gradient.addColorStop(0.08, 'red'); gradient.addColorStop(0.5, 'white'); gradient.addColorStop(0.92, 'red'); gradient.addColorStop(1, 'darkred'); ctx.fillStyle = gradient; ctx.fill(path1);
creates the illusion of a curved surface with light coming in from the front:
Note that you can increase the speed at which a color falls by adding more color breakpoints. For example, to widen the white area in the middle of the rectangle, just use two white colored stops:
gradient.addColorStop(0, 'darkred'); gradient.addColorStop(0.08, 'red'); gradient.addColorStop(0.4, 'white'); gradient.addColorStop(0.6, 'white'); gradient.addColorStop(0.92, 'red'); gradient.addColorStop(1, 'darkred');