Canvas 2D Rendering

Written by Backbone Tutorials Team

Last updated: June 2026 · 8 min read

The HTML canvas is a blank rectangle you paint on with JavaScript, and it is where almost every browser game draws its world. There are no retained shapes to update; instead you clear the canvas and redraw everything each frame. This article covers the 2D drawing context, the shapes and images you will use most, and the clear and redraw pattern that every game loop depends on.

The Breakout demo paints its paddle, ball, and bricks with exactly these calls.

Getting the 2D context

Everything starts with a drawing context obtained from the canvas element.

The drawing surface

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
// ctx is now your brush for every drawing call

The context object holds every method you use to draw. The canvas width and height attributes set the resolution you draw into, which is separate from the CSS size it is displayed at, a distinction worth getting right early.

Drawing shapes

Most games are built from rectangles, circles, and lines.

Rectangles, circles, and fills

ctx.fillStyle = "#ec4899";
ctx.fillRect(x, y, width, height);   // a filled rectangle

ctx.beginPath();
ctx.arc(cx, cy, radius, 0, Math.PI * 2);
ctx.fill();                          // a filled circle

You set a fill or stroke colour, then call a drawing method. Rectangles are immediate, while circles and other curves are built as a path and then filled or stroked.

The clear and redraw pattern

The canvas keeps whatever you drew, so each frame must start fresh.

Wipe, then paint

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // wipe
  drawBackground();
  drawPlayer();
  drawBall();   // redraw everything at its new position
}

Because the canvas does not track objects, animation is simply clearing and repainting every frame from the current state. This is the rendering half of the game loop, and the cost of those repaints is governed by the browser rendering pipeline.

Drawing images and text

Beyond shapes, games draw images for sprites and text for scores.

Pictures and the HUD

ctx.drawImage(image, x, y, width, height);

ctx.fillStyle = "#fff";
ctx.font = "16px Inter, sans-serif";
ctx.fillText("Score: " + score, 12, 24);

The same drawImage call also draws a slice of a larger image, which is the basis of sprite animation. Text uses a font string much like CSS.

Moving and rotating

To rotate or scale what you draw, you transform the canvas itself.

Save, transform, restore

ctx.save();
ctx.translate(cx, cy);   // move origin to the object
ctx.rotate(angle);       // rotate around it
ctx.drawImage(img, -w/2, -h/2, w, h);
ctx.restore();           // undo the transform

Transforms apply to everything drawn until you restore, so wrapping a rotation in save and restore keeps it from affecting the rest of the frame. This is how a game rotates a ship or spins a coin without maths on every vertex.

Common pitfalls

A handful of canvas mistakes trip up newcomers.

What usually goes wrong

The most common is forgetting to clear, so old frames smear together. The second is confusing the canvas resolution with its CSS display size, which makes drawings blurry or misplaced; set the width and height attributes. The third is forgetting beginPath before a new path, so shapes connect unexpectedly. These calls run every frame, so keep them lean, as covered in DOM rendering performance.

Read next: sprite animation, or the Game Development hub.