Canvas Basics — Drawing Playground

This page demonstrates the core Canvas 2D drawing operations. Each canvas below shows a different category of drawing. Open the page source (Ctrl+U / Cmd+Opt+U) and read the JavaScript comments to understand each call.

Experiment: Open your browser's DevTools console and try modifying the drawing. For example, paste ctx1.fillStyle = 'red'; ctx1.fillRect(300, 50, 80, 80); to add a red square to the first canvas.

1. Coordinate System

The origin (0, 0) is the top-left corner. X increases to the right, Y increases downward.

2. Rectangles

fillRect(x, y, w, h), strokeRect(x, y, w, h), and clearRect(x, y, w, h).

3. Lines and Paths

beginPath(), moveTo(), lineTo(), closePath(), stroke(), fill().

4. Arcs and Circles

arc(x, y, radius, startAngle, endAngle) draws circular arcs. Angles are in radians.

5. Text

fillText(str, x, y) and strokeText(str, x, y). Use textAlign and textBaseline for positioning.

6. Mini Chart: Putting It All Together

A simple bar chart drawn with the methods above, proving that basic drawing primitives are all you need.

← Back to Module 01 | Full Bar Chart Demo →