The Canvas API

The Canvas API lets you draw graphics pixel by pixel with JavaScript — shapes, lines, text, and images — by calling methods on a <canvas> element's 2D rendering context.

Learn The Canvas API in our free JavaScript course — an interactive lesson with runnable examples, a practice exercise and a quick reference.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

It powers charts, games, image editors, data visualizations, and any custom drawing the browser's normal HTML and CSS cannot express.

💡 About the runnable demos: A real <canvas> needs a browser, so the drawing code lives in the read-only blocks. Each Try it Yourself computes the geometry — the exact coordinates a shape would be drawn at — and logs it, which is the part people actually get wrong. Paste the read-only snippets into a browser to see them paint.

🖌️ Real-World Analogy: The canvas is a painter's canvas and the context is your set of brushes and pens . You don't move shapes around like furniture (that's the DOM); you paint them on. Want something to move? You wipe the canvas and repaint the whole scene a little differently — 60 times a second.

Grab the 2D context with canvas.getContext("2d") . The coordinate system starts at the top-left : X grows right, Y grows down . The quickest things to draw are rectangles: fillRect(x, y, w, h) paints a solid box, strokeRect outlines one, and clearRect erases a region.

To center a box you must offset by half its size — the classic coordinate bug. Let's compute that placement for real:

Anything beyond rectangles is a path . Start with beginPath() , move the "pen" with moveTo(x, y) , draw straight segments with lineTo(x, y) , and draw circles or arcs with arc(cx, cy, radius, startAngle, endAngle) — angles in radians . Finish by calling fill() or stroke() .

💡 Tip: Always call beginPath() before a new shape. Forget it and your new path connects to the previous one, producing stray lines.

A circle is really just points placed with trigonometry. Here we compute the points where arc would place markers around a circle — the basis of every pie chart and clock face:

Replace the blank with the argument that asks for the 2D drawing context.

Draw labels with ctx.font and fillText(text, x, y) . To animate, use requestAnimationFrame : it calls your function right before the next repaint. Each frame you clearRect the whole canvas, update positions, redraw, and schedule the next frame. Because the canvas is immediate-mode, nothing persists — you repaint the entire scene every time.

The motion itself is just arithmetic per frame. Here we compute the box's x-position over several frames, including the wrap-around — exactly what the loop above does:

Replace the blank so each cell's x is its column times the cell size.

ctx.clearRect(0, 0, canvas.width, canvas.height) .

Before you can draw a bar chart you must compute each bar's rectangle. Given some values and a chart height, produce the fillRect arguments for each bar so they sit on the baseline and scale to the tallest value.

Up next: Checkpoint: Browser APIs — tie it all together. 🏁

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary