HTML and CSS Reference
// Prevents mitered corners from getting too large at small angles.
ctx.miterLimit = 10;
There's not much more to say about stroke details other than the lineWidth and miterLimit properties
are affected by the current transform state, so if you do a scale on the context, your line width increases as well.
Adjusting the Opacity
The rendering context also provides a globalAlpha property that enables you to control the opacity of
whatever is rendered. This can be set to a number between 0 (fully transparent) and 1 (fully opaque).
// Fully opaque
ctx.globalAlpha = 1;
// 50% transparent
ctx.globalAlpha = 0.5;
This property persists between paths and rendering calls, so if you change it somewhere you must make sure
to change it back afterward or adjust your code to set it to 1 before each rendering call.
The simplest drawing method that Canvas supports is the drawing of arbitrarily-sized rectangles. It has three
methods supported: clearing the rectangle, creating a filled-in rectangle, and creating a rectangle outline:
// Clear the specified rectangle,
// setting each pixel to black and transparent
ctx.clearRect(x, y, w, h)
// Create a filled-in rectangle using the current fillStyle
ctx.fillRect(x, y, w, h)
// Create a rectangle outline using the current strokeStyle
ctx.strokeRect(x, y, w, h)
These methods tend to execute quickly (except when using a gradient or pattern fill) and clearRect is
often used to clear the canvas between frames.
You've already seen the three drawImage methods in Chapter 1, “Flying Before You Walk.” They are repeated
here for reference:
// Draw an image at x,y at its full size
ctx.drawImage(image, x, y)
// Draw an image at x,y rescaled to width w and height h
ctx.drawImage(image, x, y, w, h)