JavaScript Academy · Lesson

Setting Up the Canvas Context

Get and configure the 2D rendering context.

Setting Up the Canvas Context is a free JavaScript Academy lesson on CoddyKit — lesson 1 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.

What Is the Canvas API?

The Canvas API lets you draw 2D graphics with JavaScript onto a <canvas> element. You get a drawing surface made of pixels and a set of commands to paint shapes, images, and text.

The markup is a single <canvas> tag.
All drawing happens in JavaScript through a context object.

<canvas id="board" width="320" height="200"></canvas>

Getting the Context

Call getContext('2d') on the canvas element to get a CanvasRenderingContext2D. Every drawing command goes through this object.

const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
console.log(ctx.constructor.name); // CanvasRenderingContext2D

The Coordinate System

The origin (0, 0) is the top-left corner. X grows to the right, Y grows downward. A 320x200 canvas has its bottom-right corner at (320, 200).

Width and Height Attributes

The width and height HTML attributes set the drawing buffer size in pixels. They default to 300x150 if omitted. Setting them in JS also clears the canvas.

const canvas = document.getElementById("board");
canvas.width = 400;
canvas.height = 300;
console.log(canvas.width, canvas.height); // 400 300

CSS Size vs Buffer Size

CSS width/height stretch the canvas on screen but do NOT change the pixel buffer. If they differ from the attributes, drawings look blurry or stretched. Keep them in sync for crisp output.

canvas.width = 400;  // buffer pixels
canvas.style.width = "400px"; // display size — match it

Handling High-DPI Screens

On Retina displays devicePixelRatio is often 2. Scale the buffer up and the context down so lines stay sharp.

const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = "400px";
canvas.style.height = "300px";
ctx.scale(dpr, dpr);

Setting Fill and Stroke Styles

Drawing state lives on the context. fillStyle sets the fill color, strokeStyle sets the outline color. They accept any CSS color string.

ctx.fillStyle = "#3498db";
ctx.strokeStyle = "rgba(231, 76, 60, 0.8)";
ctx.lineWidth = 4;

Your First Drawing

With the context ready you can paint immediately. fillRect(x, y, w, h) paints a filled rectangle using the current fillStyle.

const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 150, 80);

Clearing the Canvas

clearRect(x, y, w, h) erases a rectangular region back to transparent. Clearing the whole buffer is the usual first step of each animation frame.

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

Saving and Restoring State

save() pushes the current style/transform onto a stack; restore() pops it back. This isolates temporary changes.

ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // fillStyle reverts to previous value

Feature Detection

Guard against very old browsers by checking getContext exists before using it.

const canvas = document.getElementById("board");
if (canvas.getContext) {
  const ctx = canvas.getContext("2d");
  // safe to draw
} else {
  console.log("Canvas not supported");
}

Quick Check

Test your understanding of canvas setup.

Recap: Canvas Setup

You learned to: grab the canvas, call getContext('2d'), understand the top-left origin, set buffer vs CSS size, handle high-DPI with devicePixelRatio, and configure fillStyle/strokeStyle. Next: drawing shapes and paths.

Frequently asked questions

Is the “Setting Up the Canvas Context” lesson free?

Yes — the full text of “Setting Up the Canvas Context” 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 “Setting Up the Canvas Context”?

Get and configure the 2D rendering context. 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 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Setting Up the Canvas Context” 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