Master HTML5 Canvas: Draw Shapes, Lines, Circles, and Images Step‑by‑Step

1. What is Canvas?

HTML5 introduced the canvas element, a core technology for drawing graphics and creating animations using JavaScript.

2. Basic Usage

Drawing with canvas involves three steps:

Obtain the canvas element.

Get the 2D rendering context ( context).

Use the context to draw shapes.

2.1 Draw a Rectangle

Set fillStyle (color, gradient, or pattern) before calling fillRect() or strokeRect(). Define the canvas width and height as HTML attributes, not CSS, to ensure correct dimensions.

2.2 Draw Lines

Use moveTo(x, y) and lineTo(x, y) to create straight lines. The canvas uses the W3C coordinate system where the y‑axis points downwards. Repeating lineTo() allows drawing multiple connected segments, triangles, arrows, and other polygons.

2.3 Draw a Circle

Use arc(x, y, radius, startAngle, endAngle, anticlockwise). Call beginPath() before and closePath() after drawing. Angles are in radians (e.g., 180° = Math.PI), and anticlockwise determines the drawing direction.

2.4 Clear the Canvas

Use clearRect(x, y, width, height) to erase a rectangular area. To clear the entire canvas, set width and height to the canvas’s own dimensions.

3. Image Operations

3.1 Draw an Image

Use drawImage(image, dx, dy, dw, dh) where image is a loaded HTMLImageElement, and dx, dy, dw, dh specify the destination position and size. The image must be fully loaded before drawing.

3.2 Clip an Image

First draw a basic shape (rectangle, polygon, or circle), then call clip() to restrict subsequent drawing to that shape. Finally, draw the image; only the portion inside the clipping region will appear.

This article covers the basic features of the canvas element; advanced topics such as collision detection, complex animations, and chart libraries will be explored in future tutorials.