JavaScript Academy · Lesson

Drawing Shapes and Paths

Render rectangles, arcs, and custom paths.

Drawing Shapes and Paths is a free JavaScript Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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);

Starting a Path

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();

moveTo and lineTo

moveTo(x, y) lifts the pen and places it without drawing. lineTo(x, y) draws a straight line from the current point to the new one.

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(120, 90);
ctx.lineTo(30, 90);
ctx.stroke();

Closing a Path

closePath() draws a line back to the starting point, completing the outline. It is useful for polygons.

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.stroke();

Filling Shapes

fill() paints the interior of the current path with fillStyle. You can fill and stroke the same path.

ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(160, 120);
ctx.lineTo(40, 120);
ctx.closePath();
ctx.fillStyle = "gold";
ctx.fill();
ctx.stroke();

Drawing Circles with arc

arc(x, y, radius, startAngle, endAngle) draws a circular arc. Angles are in radians. A full circle goes from 0 to 2 * Math.PI.

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "#9b59b6";
ctx.fill();

Partial Arcs and Pie Slices

Use a start and end angle to draw a wedge. Combine with lineTo to the center for a pie slice.

ctx.beginPath();
ctx.moveTo(100, 75);
ctx.arc(100, 75, 50, 0, Math.PI / 2);
ctx.closePath();
ctx.fill();

Quadratic and Bezier Curves

quadraticCurveTo(cpx, cpy, x, y) and bezierCurveTo(...) draw smooth curves using control points.

ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(100, 10, 180, 100);
ctx.stroke();

Line Styling

Control line appearance with lineWidth, lineCap (butt/round/square), lineJoin (miter/round/bevel), and setLineDash.

ctx.lineWidth = 6;
ctx.lineCap = "round";
ctx.setLineDash([12, 6]);
ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();

Fill Rules

fill() accepts "nonzero" (default) or "evenodd" to decide how overlapping subpaths are filled — handy for shapes with holes.

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.arc(100, 75, 25, 0, Math.PI * 2);
ctx.fill("evenodd"); // donut

Gradients as Fills

Create a gradient with createLinearGradient, add color stops, then assign it to fillStyle.

const g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, "red");
g.addColorStop(1, "blue");
ctx.fillStyle = g;
ctx.fillRect(0, 0, 200, 100);

Quick Check

Test your path knowledge.

Recap: Shapes and Paths

You can now draw rectangles, build paths with beginPath/moveTo/lineTo/closePath, render circles with arc, add curves, style lines, and fill with colors or gradients. Next: images and text.

Frequently asked questions

Is the “Drawing Shapes and Paths” lesson free?

Yes — the full text of “Drawing Shapes and Paths” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Drawing Shapes and Paths”?

Render rectangles, arcs, and custom paths. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Drawing Shapes and Paths” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy