Canvas

You will use the HTML <canvas> element and its 2D context to draw rectangles, lines, and individual pixels in JavaScript.

What it is

A canvas is a rectangular drawing surface made of pixels. The <canvas> element creates the surface; canvas.getContext("2d") returns a drawing context. The context has methods such as fillRect(), strokeRect(), beginPath(), moveTo(), lineTo(), stroke(), fill(), getImageData(), and putImageData(). Unlike DOM elements, canvas shapes are not separate objects after drawing; they become pixels in a bitmap.

Why it matters

• It is good for games, charts, image filters, and simulations where many pixels change quickly.
• It gives direct control over color, position, and pixel data.
• It can draw shapes without creating many DOM nodes.
• It supports pixel-level inspection and editing with ImageData.

Syntax or steps

The smallest useful pattern is: get the context, set a style, then draw.

const ctx = canvas.getContext("2d");
ctx.fillStyle = "#22c55e";
ctx.fillRect(0, 0, 50, 50);

fillRect(x, y, width, height) draws a filled rectangle. The origin (0, 0) is the top-left pixel. To change one pixel, create or modify ImageData, then call putImageData().

Example

<canvas id="board" width="200" height="120"></canvas>
<script>
const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "#1e293b";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "#22c55e";
ctx.fillRect(20, 20, 50, 50);

ctx.strokeStyle = "#f8fafc";
ctx.lineWidth = 2;
ctx.strokeRect(20, 20, 50, 50);

const pixel = ctx.createImageData(1, 1);
pixel.data[0] = 255; // red
pixel.data[1] = 0;   // green
pixel.data[2] = 0;   // blue
pixel.data[3] = 255; // alpha
ctx.putImageData(pixel, 100, 60);

const sample = ctx.getImageData(25, 25, 1, 1);
console.log(sample.data); // Uint8ClampedArray [34, 197, 94, 255]
</script>

The first fillRect() paints the whole canvas dark. The second draws a green rectangle. strokeRect() adds a white border. createImageData(1, 1) makes a one-pixel buffer; its data array stores red, green, blue, and alpha values from 0 to 255. putImageData() writes that pixel at (100, 60). getImageData() reads a pixel inside the green rectangle.

Common mistakes

• Setting only CSS size: canvas.style.width scales the bitmap and can blur drawing. Set canvas.width and canvas.height attributes for the real pixel buffer.
• Forgetting to clear: canvas keeps previous pixels. Use ctx.clearRect(0, 0, canvas.width, canvas.height) before redrawing.
• Calling getContext() before the canvas exists. Put the script after the element or wait for DOM loading.
• Assuming shapes remain editable. After drawing, they are pixels; redraw or use ImageData to change them.

When to use it

Canvas is best for pixel-heavy or frequently redrawn graphics. SVG is better when each shape should remain a selectable, scalable DOM element.

Practice

1. Guided: Draw a 60 by 40 blue rectangle at (10, 10), then draw a red 1-pixel point at (80, 30) using putImageData().
2. Challenge: Read the pixel at (10, 10) and log its RGBA values. Hint: use ctx.getImageData(10, 10, 1, 1).data.

Quick check

Question: What does ctx.fillRect(0, 0, 50, 50) do? Answer: It paints a filled rectangle 50 pixels wide and 50 pixels tall starting at the canvas top-left corner.

Summary

Canvas gives JavaScript a pixel-based drawing surface through a 2D context. You draw by setting styles and calling methods, and you can inspect or edit pixels with ImageData. Use it when you need bitmap control rather than separate DOM shapes.