HTML Canvas

Canvas supports only one primitive shape: rectangles. Three functions exist for drawing rectangles:

• fillRect(x, y, width, height)
  • Draw a filled rectangle.
• strokeRect(x, y, width, height)
  • Draw a rectangle outline.
• clearReact(x, y, width, height)
  • Make the rectangle area transparent.

The x~/~y parameters are relative to a top left origin.

Paths are the other primitives in canvas. First, call the beginPath() method. Then, execute one or more of the following drawing commands. Lastly, render the path stroke() and/or fill().

• moveTo(x, y)
  • Lift and move the pen.
• lineTo(x, y)
  • Draw a line.
• arc(x, y, radius, startAngle, endAngle, anticlockwise)
  • Draw an arc centered at (x, y). startAngle and endAngle are given in radians.
• arcTo(x1, y1, x2, y2, radius)
  • Draw an arc on ending at (x2, y2) with the control point (x1, y1), connected to the previous point by a straight line.
• quadraticCurveTo(cp1x, cp1y, x, y)
• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
• rect(x, y, width, height)

// Line
context.beginPath();
context.moveTo(10, 10);
context.lineTo(100, 100);
context.stroke();

// Triangle
context.beginPath();
context.moveTo(50, 50);
context.lineTo(100, 100);
context.lineTo(50, 100);
context.fill();

// Circle
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, true);
context.stroke();

Optionally, closePath() may be called to close the shape by drawing a straight line from the current point to the start. If the shape has already been closed or if there's only one point in the list, this function does nothing. Calling fill() will close any open shapes and closePath() is unnecessary. This is not the case with stroke().

Set the fillStyle and strokeStyle properties to change the fill and stroke colors, respectively. Use any CSS color.

context.fillStyle = 'red';
context.fillRect(100, 100, 100, 100);

Set transparency as part of the color or use the globalAlpha property. This value (between 0 and 1) applies a transparency value to all future shapes.

context.globalAlpha = 0.2;

Lines may be styled with several properties and functions: lineWidth, lineCap, lineJoin, miterLimit, setLineDash(segments)~/~getLineDash(), and lineDashOffset. See this page for more information.

Obtaining crisp lines requires understanding how paths are stroked. Note the situation in the second image below. The area to be filled only extends halfway into the pixels on either side of the path. Be precise to avoid rendering a blurry approximation.

Shapes may be also filled and stoked with gradients and patterns. Use the createLinearGradient() and createRadialGradient() methods to create gradients. Then, use the addColorStop() on these objects to denote relative color positions. Give the createPattern() method an image to create a pattern. Gradients and patterns should be handed to the fillStyle property.

Control shadows with four properties: shadowOffsetX, shadowOffsetY, shadowBlur, and shadowColor. shadowColor is fully-transparent black by default.

Two methods exist for writing text: fillText(text, x, y) and strokeText(text, x, y). Change the font and size using the font property.

context.font = '100px Helvetica';
context.fillText('Hi there', 100, 100);

Other useful properties include textAlign, textBaseline, and direction.

To add an image to the canvas, first get a reference to HTMLImageElement. This may be done from scratch (see below) or with a call like document.getElementById(). Then, draw the image using the drawImage() function.

const image = new Image();
image.onload = function() {
    // Only be executed when the image has finished loading.
    context.drawImage(image, 0, 0);
}
image.src = 'example.png';

Note that drawImage() takes many optional parameters for scaling and slicing images.

Save and restore the state of the canvas with the save() and restore() methods, respectively. States are stored as a stack, each save() pushes, each restore() pops. The state consists of the transformations that have been applied and changes to style attributes.

Set the component's width and height with JavaScript.

canvas.width = window.innerWidth
canvas.height = window.innerHeight

TODO Do we also need CSS?

canvas {
    width: 100%;
    height: 100%;
}