JavaScript Academy · Lesson

Drawing Shapes and Paths

Render rectangles, arcs, and custom paths.

Rectangles First

Rectangles have dedicated shortcuts: fillRect, strokeRect, and clearRect. Each takes (x, y, width, height).

ctx.fillStyle = "#2ecc71";
ctx.fillRect(10, 10, 120, 60);
ctx.strokeStyle = "#000";
ctx.strokeRect(10, 10, 120, 60);

For anything other than rectangles you build a path. Call beginPath() to start fresh, add segments, then stroke() or fill().

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.stroke();