To start using the canvas, put the canvas element in your webpage HTML, along with a width or height in pixels. Fallback content goes in between the opening and closing tag.
<canvas id="canvas-name" width="150" height="150"></canvas>
The canvas is initially blank and then needs to be accessed, with the new context assigned to a variable. This variable will become the way to draw on the canvas.
var canvas = document.getElementById('canvas-name'); var ctx = canvas.getContext('2d');
Canvas only supports rectangles and paths.
ctx.fillRect(x, y, width, height) // Draws a filled rectangle. ctx.strokeRect(x, y, width, height) // Draws a rectangular outline. ctx.clearRect(x, y, width, height) // Clears the specified rectangular area, making it fully transparent.
A path is a list of points, connected by segments of lines that can be of different shapes, curved or not, of different width and of different color. A path, or even a subpath, can be closed. To make shapes using paths, we take some extra steps:
- First, you create the path with
- Then you use drawing commands to draw into the path
- Once the path has been created, you can stroke or fill the path to render it with
ctx.beginPath() // Creates a new path. Once created, future drawing commands are directed into the path and used to build the path up. ctx.closePath() // Adds a straight line to the path, going to the start of the current sub-path. ctx.stroke() // Draws the shape by stroking its outline. ctx.fill() // Draws a solid shape by filling the path's content area.
moveTo(x,y) moves the pen without recording it as a path to be drawn or filled.
lineTo(x,y) should be used to draw straight lines.
arc(x, y, radius, startAngle, anticlockwise) will draw an arc centered at x, y.
arcTo() is often used to make rounded corners https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo
quadraticCurveTo(cp1x, cp1y, x, y) and
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) are also good for [rounded shapes](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#paths.
Last modified: 202206101419