HTML Canvas with JavaScript Get Certified
The HTML <canvas> element is a blank drawing surface that JavaScript controls entirely through code. On a real page, you select it and call canvas.getContext("2d") to start drawing shapes, lines, and text onto it.
This lesson uses the standards-based OffscreenCanvas API, which offers the same 2D drawing methods without a canvas element on the page, so every example performs genuine drawing operations. After drawing, we read the actual pixel data back with getImageData() and print the real colour values, proving exactly what was drawn. Below the text output, each example also shows the canvas itself with the sampled pixels marked, so you can match every number to a place in the picture. OffscreenCanvas needs a reasonably recent browser (for example Safari 16.4 or newer).
Creating a Canvas and Context
On a real page you would write const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d");. Here, OffscreenCanvas gives us the same 2D context without needing a canvas element on the page. Every example then displays a copy of its canvas below the text output, with the sampled pixels marked.
What this code does: Creates a 200×100 canvas, gets its 2D rendering context (the object that holds all the drawing methods) and prints the canvas size, the type of the context and the number of pixels. Nothing has been drawn, so the picture below the text output is a checkerboard: that is how transparent pixels are shown. A new canvas always starts fully transparent.
// On a real page: const canvas = document.querySelector("canvas");
const canvas = new OffscreenCanvas(200, 100);
// The 2D context holds every drawing method (fillRect, arc, stroke ...)
const ctx = canvas.getContext("2d");
console.log("Canvas size:", canvas.width + "x" + canvas.height);
console.log("Context type:", ctx.constructor.name);
console.log("Total pixels:", canvas.width * canvas.height);
// A new canvas is blank (fully transparent), so it shows as a checkerboard
showCanvas("A new, empty 200x100 canvas", canvas);
// ===== Helpers below are not part of the lesson =====
function showPreview(label, node) {
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-preview-box";
box.innerHTML = "<p class='demo-preview-label'>" + label + "</p>";
box.appendChild(node);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
function showCanvas(label, source, options) {
const scale = (options && options.scale) || 1;
const marks = (options && options.marks) || [];
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.cssText = "display:block;width:" + source.width * scale + "px;height:" + source.height * scale + "px;image-rendering:pixelated;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;";
const wrap = document.createElement("div");
wrap.className = "demo-canvas-wrap";
wrap.style.cssText = "position:relative;display:inline-block;";
wrap.appendChild(copy);
marks.forEach((m) => {
const ring = document.createElement("span");
ring.className = "demo-canvas-mark";
ring.style.cssText = "position:absolute;box-sizing:border-box;width:12px;height:12px;border:2px solid #d946ef;border-radius:50%;left:" + ((m.x + 0.5) * scale - 6) + "px;top:" + ((m.y + 0.5) * scale - 6) + "px;";
ring.innerHTML = "<b style='position:absolute;left:12px;top:-4px;font:bold 12px sans-serif;color:#a21caf'>" + m.name + "</b>";
wrap.appendChild(ring);
});
showPreview(label, wrap);
}new OffscreenCanvas(200, 100) makes a drawing surface of 200 pixels wide and 100 high that lives only in memory. On a real page you would select a canvas element instead; its size comes from its width and height attributes.
A canvas by itself cannot draw. getContext(“2d”) returns the rendering context, the object with fillRect(), arc(), stroke(), getImageData() and the rest. It is a normal canvas context, which is why the same code works on a page canvas.
width and height are in pixels. ctx.constructor.name shows which kind of context you have: for an OffscreenCanvas it is OffscreenCanvasRenderingContext2D. The pixel count (200 x 100 = 20,000) matters later, because getImageData() returns 4 numbers for every pixel.
Displays a copy of the canvas. A new canvas is transparent black, [0, 0, 0, 0] for every pixel, which the helper draws on a checkerboard so you can tell it from a white canvas.
Everything below this comment is support code that displays the canvas and the pixel colours in the output. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (a canvas, colour swatches) in a captioned box inside the Console Output area (id previewContent). setTimeout(…, 0) waits until the text output has been printed, so graphics appear below it. The box and caption use demo- classes so they cannot affect the tutorial page’s own styles.
showCanvas() makes the drawing visible. It reads two optional settings: scale (how many times to enlarge the picture, useful for tiny canvases) and marks (pixels to point out). Because an OffscreenCanvas is never on the page, the helper copies it into a normal canvas with drawImage(). The copy is a snapshot taken at this moment. image-rendering: pixelated keeps enlarged pixels sharp, and the checkerboard background makes transparent areas visible.
A wrapper div (class demo-canvas-wrap) with position: relative lets the marker rings be placed on top of the canvas.
For each mark it adds a pink ring and a name at the pixel’s position, so you can match each line of text output to a place in the picture. The position is (x + 0.5) because a pixel covers the area from x to x + 1, so its centre is half a pixel further. Multiplying by scale keeps the ring on the right pixel when the picture is enlarged.
Shows the picture, with its markers, below the text output.
Drawing a Rectangle — and Proving It
After filling a rectangle, getImageData(x, y, 1, 1) reads the real color of a single pixel at that position, as an [r, g, b, a] array with values from 0–255.
What this code does: Draws a filled red rectangle, then reads one pixel from the middle of it with getImageData() and prints its [r, g, b, a] values, which should be [255, 0, 0, 255]: full red, no green or blue, fully opaque. The picture shows the rectangle with a ring marking exactly which pixel was read, and a colour box shows the value that came back. This proves the colour was really written to the canvas.
const canvas = new OffscreenCanvas(200, 100);
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
const pixel = ctx.getImageData(30, 30, 1, 1).data;
console.log("Pixel A at (30, 30), inside the red rectangle:", Array.from(pixel));
showCanvas("The rectangle and the pixel we read", canvas, { marks: [{ x: 30, y: 30, name: "A" }] });
showSwatches("Colour read back from pixel A", [{ name: "A", rgba: pixel }]);
// ===== Helpers below are not part of the lesson =====
function showPreview(label, node) {
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-preview-box";
box.innerHTML = "<p class='demo-preview-label'>" + label + "</p>";
box.appendChild(node);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
function showCanvas(label, source, options) {
const scale = (options && options.scale) || 1;
const marks = (options && options.marks) || [];
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.cssText = "display:block;width:" + source.width * scale + "px;height:" + source.height * scale + "px;image-rendering:pixelated;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;";
const wrap = document.createElement("div");
wrap.className = "demo-canvas-wrap";
wrap.style.cssText = "position:relative;display:inline-block;";
wrap.appendChild(copy);
marks.forEach((m) => {
const ring = document.createElement("span");
ring.className = "demo-canvas-mark";
ring.style.cssText = "position:absolute;box-sizing:border-box;width:12px;height:12px;border:2px solid #d946ef;border-radius:50%;left:" + ((m.x + 0.5) * scale - 6) + "px;top:" + ((m.y + 0.5) * scale - 6) + "px;";
ring.innerHTML = "<b style='position:absolute;left:12px;top:-4px;font:bold 12px sans-serif;color:#a21caf'>" + m.name + "</b>";
wrap.appendChild(ring);
});
showPreview(label, wrap);
}
function showSwatches(label, samples) {
const row = document.createElement("div");
row.className = "demo-swatch-row";
row.style.cssText = "display:flex;flex-wrap:wrap;gap:8px;font:12px monospace;color:#0f172a;";
samples.forEach((s) => {
const item = document.createElement("div");
item.className = "demo-swatch";
const color = "rgba(" + s.rgba[0] + "," + s.rgba[1] + "," + s.rgba[2] + "," + s.rgba[3] / 255 + ")";
item.innerHTML = "<div style='width:96px;height:36px;border:1px solid #94a3b8;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 12px 12px'>"
+ "<div style='width:100%;height:100%;background:" + color + "'></div></div>"
+ s.name + ": " + Array.from(s.rgba).join(", ");
row.appendChild(item);
});
showPreview(label, row);
}Creates an off-screen canvas and gets its 2D context. Every drawing call and every pixel read below goes through ctx.
fillStyle sets the colour for the next fill. fillRect(x, y, width, height) paints a rectangle whose top-left corner is at (10, 10), 50 wide and 50 high, so it covers x 10 to 60 and y 10 to 60. Canvas coordinates start at the top-left corner, with y growing downwards.
getImageData(30, 30, 1, 1) copies a 1×1 area whose top-left corner is (30, 30), which is inside the rectangle. .data holds the pixel as four numbers: red, green, blue, alpha (each 0 to 255).
Array.from(pixel) turns the typed array into a normal array so it prints as [255, 0, 0, 255]. Red is 255, green and blue are 0, alpha is 255 (fully opaque).
Displays the canvas with a ring named A at the pixel we sampled, so you can see that (30, 30) is inside the rectangle.
Draws a box in the colour that came back from getImageData, with the numbers underneath.
Everything below this comment is support code that displays the canvas and the pixel colours in the output. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (a canvas, colour swatches) in a captioned box inside the Console Output area (id previewContent). setTimeout(…, 0) waits until the text output has been printed, so graphics appear below it. The box and caption use demo- classes so they cannot affect the tutorial page’s own styles.
showCanvas() makes the drawing visible. It reads two optional settings: scale (how many times to enlarge the picture, useful for tiny canvases) and marks (pixels to point out). Because an OffscreenCanvas is never on the page, the helper copies it into a normal canvas with drawImage(). The copy is a snapshot taken at this moment. image-rendering: pixelated keeps enlarged pixels sharp, and the checkerboard background makes transparent areas visible.
A wrapper div (class demo-canvas-wrap) with position: relative lets the marker rings be placed on top of the canvas.
For each mark it adds a pink ring and a name at the pixel’s position, so you can match each line of text output to a place in the picture. The position is (x + 0.5) because a pixel covers the area from x to x + 1, so its centre is half a pixel further. Multiplying by scale keeps the ring on the right pixel when the picture is enlarged.
Shows the picture, with its markers, below the text output.
showSwatches() turns pixel values into colour boxes. This creates a flex row (class demo-swatch-row) to hold them.
Each sample has a name and an [r, g, b, a] array. The colour is built as an rgba() string; the alpha value is divided by 255 because CSS expects 0 to 1, while getImageData uses 0 to 255. A checkerboard sits behind the colour, so a transparent pixel shows as a checkerboard and a half-transparent pixel shows a mix. The numbers are printed under each box.
Shows the swatches below the text output.
Comparing a Pixel Inside vs. Outside a Shape
A blank canvas starts fully transparent, so a pixel outside any drawn shape reads back as [0, 0, 0, 0].
What this code does: Draws the same red rectangle, then reads one pixel inside it (A) and one outside it (B). Pixel A comes back as opaque red, [255, 0, 0, 255], and pixel B as [0, 0, 0, 0] because nothing was ever drawn there. The picture marks both pixels and two colour boxes show the two results (the empty one appears as the checkerboard).
const canvas = new OffscreenCanvas(200, 100);
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
const insidePixel = ctx.getImageData(30, 30, 1, 1).data;
const outsidePixel = ctx.getImageData(150, 30, 1, 1).data;
console.log("A, inside the rectangle:", Array.from(insidePixel));
console.log("B, outside the rectangle:", Array.from(outsidePixel));
showCanvas("Pixels A and B", canvas, { marks: [{ x: 30, y: 30, name: "A" }, { x: 150, y: 30, name: "B" }] });
showSwatches("Colours read back", [{ name: "A", rgba: insidePixel }, { name: "B", rgba: outsidePixel }]);
// ===== Helpers below are not part of the lesson =====
function showPreview(label, node) {
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-preview-box";
box.innerHTML = "<p class='demo-preview-label'>" + label + "</p>";
box.appendChild(node);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
function showCanvas(label, source, options) {
const scale = (options && options.scale) || 1;
const marks = (options && options.marks) || [];
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.cssText = "display:block;width:" + source.width * scale + "px;height:" + source.height * scale + "px;image-rendering:pixelated;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;";
const wrap = document.createElement("div");
wrap.className = "demo-canvas-wrap";
wrap.style.cssText = "position:relative;display:inline-block;";
wrap.appendChild(copy);
marks.forEach((m) => {
const ring = document.createElement("span");
ring.className = "demo-canvas-mark";
ring.style.cssText = "position:absolute;box-sizing:border-box;width:12px;height:12px;border:2px solid #d946ef;border-radius:50%;left:" + ((m.x + 0.5) * scale - 6) + "px;top:" + ((m.y + 0.5) * scale - 6) + "px;";
ring.innerHTML = "<b style='position:absolute;left:12px;top:-4px;font:bold 12px sans-serif;color:#a21caf'>" + m.name + "</b>";
wrap.appendChild(ring);
});
showPreview(label, wrap);
}
function showSwatches(label, samples) {
const row = document.createElement("div");
row.className = "demo-swatch-row";
row.style.cssText = "display:flex;flex-wrap:wrap;gap:8px;font:12px monospace;color:#0f172a;";
samples.forEach((s) => {
const item = document.createElement("div");
item.className = "demo-swatch";
const color = "rgba(" + s.rgba[0] + "," + s.rgba[1] + "," + s.rgba[2] + "," + s.rgba[3] / 255 + ")";
item.innerHTML = "<div style='width:96px;height:36px;border:1px solid #94a3b8;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 12px 12px'>"
+ "<div style='width:100%;height:100%;background:" + color + "'></div></div>"
+ s.name + ": " + Array.from(s.rgba).join(", ");
row.appendChild(item);
});
showPreview(label, row);
}Creates an off-screen canvas and gets its 2D context. Every drawing call and every pixel read below goes through ctx.
A red rectangle covering x 10 to 60 and y 10 to 60.
(30, 30) lies inside the rectangle; (150, 30) is far to the right of it, in an area that was never drawn on. Each call reads a single 1×1 pixel.
A is [255, 0, 0, 255]: red and opaque. B is [0, 0, 0, 0]: black with an alpha of 0, which means completely transparent, the starting state of every canvas pixel. The alpha value is what really tells ‘drawn’ from ‘not drawn’.
Rings A and B show where the two samples were taken.
A is a solid red box; B shows the checkerboard because it is fully transparent.
Everything below this comment is support code that displays the canvas and the pixel colours in the output. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (a canvas, colour swatches) in a captioned box inside the Console Output area (id previewContent). setTimeout(…, 0) waits until the text output has been printed, so graphics appear below it. The box and caption use demo- classes so they cannot affect the tutorial page’s own styles.
showCanvas() makes the drawing visible. It reads two optional settings: scale (how many times to enlarge the picture, useful for tiny canvases) and marks (pixels to point out). Because an OffscreenCanvas is never on the page, the helper copies it into a normal canvas with drawImage(). The copy is a snapshot taken at this moment. image-rendering: pixelated keeps enlarged pixels sharp, and the checkerboard background makes transparent areas visible.
A wrapper div (class demo-canvas-wrap) with position: relative lets the marker rings be placed on top of the canvas.
For each mark it adds a pink ring and a name at the pixel’s position, so you can match each line of text output to a place in the picture. The position is (x + 0.5) because a pixel covers the area from x to x + 1, so its centre is half a pixel further. Multiplying by scale keeps the ring on the right pixel when the picture is enlarged.
Shows the picture, with its markers, below the text output.
showSwatches() turns pixel values into colour boxes. This creates a flex row (class demo-swatch-row) to hold them.
Each sample has a name and an [r, g, b, a] array. The colour is built as an rgba() string; the alpha value is divided by 255 because CSS expects 0 to 1, while getImageData uses 0 to 255. A checkerboard sits behind the colour, so a transparent pixel shows as a checkerboard and a half-transparent pixel shows a mix. The numbers are printed under each box.
Shows the swatches below the text output.
Drawing a Circle
arc() draws circles and arcs. Sampling the exact center confirms the fill color landed where expected.
What this code does: Draws a blue filled circle with arc() and then reads two pixels: the centre of the circle (A), which should be opaque blue, [0, 0, 255, 255], and a pixel near the top-left corner (B), which is outside the circle and should be transparent. The picture shows the circle with both pixels marked.
const canvas = new OffscreenCanvas(200, 200);
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = "blue";
ctx.fill();
const center = ctx.getImageData(100, 100, 1, 1).data;
const corner = ctx.getImageData(5, 5, 1, 1).data;
console.log("A, center of the circle:", Array.from(center));
console.log("B, corner (outside the circle):", Array.from(corner));
showCanvas("Circle with sampled pixels", canvas, { marks: [{ x: 100, y: 100, name: "A" }, { x: 5, y: 5, name: "B" }] });
showSwatches("Colours read back", [{ name: "A", rgba: center }, { name: "B", rgba: corner }]);
// ===== Helpers below are not part of the lesson =====
function showPreview(label, node) {
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-preview-box";
box.innerHTML = "<p class='demo-preview-label'>" + label + "</p>";
box.appendChild(node);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
function showCanvas(label, source, options) {
const scale = (options && options.scale) || 1;
const marks = (options && options.marks) || [];
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.cssText = "display:block;width:" + source.width * scale + "px;height:" + source.height * scale + "px;image-rendering:pixelated;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;";
const wrap = document.createElement("div");
wrap.className = "demo-canvas-wrap";
wrap.style.cssText = "position:relative;display:inline-block;";
wrap.appendChild(copy);
marks.forEach((m) => {
const ring = document.createElement("span");
ring.className = "demo-canvas-mark";
ring.style.cssText = "position:absolute;box-sizing:border-box;width:12px;height:12px;border:2px solid #d946ef;border-radius:50%;left:" + ((m.x + 0.5) * scale - 6) + "px;top:" + ((m.y + 0.5) * scale - 6) + "px;";
ring.innerHTML = "<b style='position:absolute;left:12px;top:-4px;font:bold 12px sans-serif;color:#a21caf'>" + m.name + "</b>";
wrap.appendChild(ring);
});
showPreview(label, wrap);
}
function showSwatches(label, samples) {
const row = document.createElement("div");
row.className = "demo-swatch-row";
row.style.cssText = "display:flex;flex-wrap:wrap;gap:8px;font:12px monospace;color:#0f172a;";
samples.forEach((s) => {
const item = document.createElement("div");
item.className = "demo-swatch";
const color = "rgba(" + s.rgba[0] + "," + s.rgba[1] + "," + s.rgba[2] + "," + s.rgba[3] / 255 + ")";
item.innerHTML = "<div style='width:96px;height:36px;border:1px solid #94a3b8;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 12px 12px'>"
+ "<div style='width:100%;height:100%;background:" + color + "'></div></div>"
+ s.name + ": " + Array.from(s.rgba).join(", ");
row.appendChild(item);
});
showPreview(label, row);
}Creates an off-screen canvas and gets its 2D context. Every drawing call and every pixel read below goes through ctx.
beginPath() starts a new, empty shape so nothing from earlier drawing is carried over. arc(100, 100, 50, 0, Math.PI * 2) describes a circle: centre (100, 100), radius 50, from angle 0 to 2 x pi radians (a full turn). Describing the path does not paint anything; fillStyle picks blue and fill() paints the inside of the path.
(100, 100) is exactly the middle of the circle. (5, 5) is in the corner, far from the circle (about 134 pixels from the centre, while the radius is only 50).
The centre returns [0, 0, 255, 255], opaque blue; the corner returns [0, 0, 0, 0], transparent.
Rings A and B show the centre sample and the corner sample.
A solid blue box for A and the checkerboard for B.
Everything below this comment is support code that displays the canvas and the pixel colours in the output. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (a canvas, colour swatches) in a captioned box inside the Console Output area (id previewContent). setTimeout(…, 0) waits until the text output has been printed, so graphics appear below it. The box and caption use demo- classes so they cannot affect the tutorial page’s own styles.
showCanvas() makes the drawing visible. It reads two optional settings: scale (how many times to enlarge the picture, useful for tiny canvases) and marks (pixels to point out). Because an OffscreenCanvas is never on the page, the helper copies it into a normal canvas with drawImage(). The copy is a snapshot taken at this moment. image-rendering: pixelated keeps enlarged pixels sharp, and the checkerboard background makes transparent areas visible.
A wrapper div (class demo-canvas-wrap) with position: relative lets the marker rings be placed on top of the canvas.
For each mark it adds a pink ring and a name at the pixel’s position, so you can match each line of text output to a place in the picture. The position is (x + 0.5) because a pixel covers the area from x to x + 1, so its centre is half a pixel further. Multiplying by scale keeps the ring on the right pixel when the picture is enlarged.
Shows the picture, with its markers, below the text output.
showSwatches() turns pixel values into colour boxes. This creates a flex row (class demo-swatch-row) to hold them.
Each sample has a name and an [r, g, b, a] array. The colour is built as an rgba() string; the alpha value is divided by 255 because CSS expects 0 to 1, while getImageData uses 0 to 255. A checkerboard sits behind the colour, so a transparent pixel shows as a checkerboard and a half-transparent pixel shows a mix. The numbers are printed under each box.
Shows the swatches below the text output.
Clearing Part of the Canvas
clearRect() genuinely erases pixels back to transparent. You can confirm this by reading the alpha channel before and after.
What this code does: Fills a 100×100 canvas with green, reads a pixel in the middle (A), then erases a 40×40 square with clearRect() and reads the same pixel again. Before clearing, A is opaque green [0, 128, 0, 255]; after clearing it is [0, 0, 0, 0]. A second pixel (B) outside the erased square stays green. The output shows the canvas before and after, so you can see the hole appear.
const canvas = new OffscreenCanvas(100, 100);
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 100, 100);
const marks = [{ x: 50, y: 50, name: "A" }, { x: 5, y: 5, name: "B" }];
console.log("A before clear:", Array.from(ctx.getImageData(50, 50, 1, 1).data));
showCanvas("Before clearRect: all green", canvas, { scale: 3, marks: marks });
ctx.clearRect(20, 20, 40, 40);
console.log("A after clear (inside the cleared area):", Array.from(ctx.getImageData(50, 50, 1, 1).data));
console.log("B after clear (outside the cleared area):", Array.from(ctx.getImageData(5, 5, 1, 1).data));
showCanvas("After clearRect(20, 20, 40, 40)", canvas, { scale: 3, marks: marks });
// ===== Helpers below are not part of the lesson =====
function showPreview(label, node) {
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-preview-box";
box.innerHTML = "<p class='demo-preview-label'>" + label + "</p>";
box.appendChild(node);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
function showCanvas(label, source, options) {
const scale = (options && options.scale) || 1;
const marks = (options && options.marks) || [];
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.cssText = "display:block;width:" + source.width * scale + "px;height:" + source.height * scale + "px;image-rendering:pixelated;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;";
const wrap = document.createElement("div");
wrap.className = "demo-canvas-wrap";
wrap.style.cssText = "position:relative;display:inline-block;";
wrap.appendChild(copy);
marks.forEach((m) => {
const ring = document.createElement("span");
ring.className = "demo-canvas-mark";
ring.style.cssText = "position:absolute;box-sizing:border-box;width:12px;height:12px;border:2px solid #d946ef;border-radius:50%;left:" + ((m.x + 0.5) * scale - 6) + "px;top:" + ((m.y + 0.5) * scale - 6) + "px;";
ring.innerHTML = "<b style='position:absolute;left:12px;top:-4px;font:bold 12px sans-serif;color:#a21caf'>" + m.name + "</b>";
wrap.appendChild(ring);
});
showPreview(label, wrap);
}Creates an off-screen canvas and gets its 2D context. Every drawing call and every pixel read below goes through ctx.
The whole 100×100 canvas becomes green. CSS ‘green’ is the darker colour rgb(0, 128, 0), not pure 255 green.
A at (50, 50) will end up inside the erased square and B at (5, 5) outside it. The same two marks are used for both pictures.
Reads A, which is [0, 128, 0, 255], opaque green, and shows a snapshot. scale: 3 enlarges the 100×100 canvas to 300×300 on screen.
clearRect(x, y, width, height) sets every pixel in the rectangle back to transparent black. Here the square covers x 20 to 60 and y 20 to 60. It erases pixels, unlike painting white on top.
A is now [0, 0, 0, 0]: the alpha dropped from 255 to 0, so the pixel is genuinely empty. B, outside the square, is still opaque green. The second picture shows the checkerboard through the hole.
Everything below this comment is support code that displays the canvas and the pixel colours in the output. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (a canvas, colour swatches) in a captioned box inside the Console Output area (id previewContent). setTimeout(…, 0) waits until the text output has been printed, so graphics appear below it. The box and caption use demo- classes so they cannot affect the tutorial page’s own styles.
showCanvas() makes the drawing visible. It reads two optional settings: scale (how many times to enlarge the picture, useful for tiny canvases) and marks (pixels to point out). Because an OffscreenCanvas is never on the page, the helper copies it into a normal canvas with drawImage(). The copy is a snapshot taken at this moment. image-rendering: pixelated keeps enlarged pixels sharp, and the checkerboard background makes transparent areas visible.
A wrapper div (class demo-canvas-wrap) with position: relative lets the marker rings be placed on top of the canvas.
For each mark it adds a pink ring and a name at the pixel’s position, so you can match each line of text output to a place in the picture. The position is (x + 0.5) because a pixel covers the area from x to x + 1, so its centre is half a pixel further. Multiplying by scale keeps the ring on the right pixel when the picture is enlarged.
Shows the picture, with its markers, below the text output.
Drawing a Line
A stroked line only colors the pixels directly along its path. Sampling just above or below it should still be transparent.
What this code does: Draws a 4-pixel-wide black horizontal line from (10, 50) to (90, 50) using moveTo, lineTo and stroke, then reads one pixel on the line (A) and one well above it (B). A is opaque black, [0, 0, 0, 255]; B is transparent. The picture is enlarged three times so the thin line and both sample points are easy to see.
const canvas = new OffscreenCanvas(100, 100);
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(10, 50);
ctx.lineTo(90, 50);
ctx.stroke();
const onLine = ctx.getImageData(50, 50, 1, 1).data;
const awayFromLine = ctx.getImageData(50, 10, 1, 1).data;
console.log("A, on the line:", Array.from(onLine));
console.log("B, away from the line:", Array.from(awayFromLine));
showCanvas("A line and two sampled pixels", canvas, { scale: 3, marks: [{ x: 50, y: 50, name: "A" }, { x: 50, y: 10, name: "B" }] });
showSwatches("Colours read back", [{ name: "A", rgba: onLine }, { name: "B", rgba: awayFromLine }]);
// ===== Helpers below are not part of the lesson =====
function showPreview(label, node) {
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-preview-box";
box.innerHTML = "<p class='demo-preview-label'>" + label + "</p>";
box.appendChild(node);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
function showCanvas(label, source, options) {
const scale = (options && options.scale) || 1;
const marks = (options && options.marks) || [];
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.cssText = "display:block;width:" + source.width * scale + "px;height:" + source.height * scale + "px;image-rendering:pixelated;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;";
const wrap = document.createElement("div");
wrap.className = "demo-canvas-wrap";
wrap.style.cssText = "position:relative;display:inline-block;";
wrap.appendChild(copy);
marks.forEach((m) => {
const ring = document.createElement("span");
ring.className = "demo-canvas-mark";
ring.style.cssText = "position:absolute;box-sizing:border-box;width:12px;height:12px;border:2px solid #d946ef;border-radius:50%;left:" + ((m.x + 0.5) * scale - 6) + "px;top:" + ((m.y + 0.5) * scale - 6) + "px;";
ring.innerHTML = "<b style='position:absolute;left:12px;top:-4px;font:bold 12px sans-serif;color:#a21caf'>" + m.name + "</b>";
wrap.appendChild(ring);
});
showPreview(label, wrap);
}
function showSwatches(label, samples) {
const row = document.createElement("div");
row.className = "demo-swatch-row";
row.style.cssText = "display:flex;flex-wrap:wrap;gap:8px;font:12px monospace;color:#0f172a;";
samples.forEach((s) => {
const item = document.createElement("div");
item.className = "demo-swatch";
const color = "rgba(" + s.rgba[0] + "," + s.rgba[1] + "," + s.rgba[2] + "," + s.rgba[3] / 255 + ")";
item.innerHTML = "<div style='width:96px;height:36px;border:1px solid #94a3b8;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 12px 12px'>"
+ "<div style='width:100%;height:100%;background:" + color + "'></div></div>"
+ s.name + ": " + Array.from(s.rgba).join(", ");
row.appendChild(item);
});
showPreview(label, row);
}Creates an off-screen canvas and gets its 2D context. Every drawing call and every pixel read below goes through ctx.
strokeStyle is the colour of lines and outlines (fillStyle is for filled areas). lineWidth is the thickness in pixels; the line is centred on its path, so 4 means 2 pixels on each side.
beginPath() starts a new path. moveTo(10, 50) puts the pen down at the start without drawing; lineTo(90, 50) adds a straight segment to the right. Nothing is visible until stroke() paints the path with the stroke settings.
(50, 50) lies on the line’s path. (50, 10) is 40 pixels above it, far outside the 4-pixel thickness.
A is [0, 0, 0, 255], solid black. B is [0, 0, 0, 0], untouched. Black with alpha 0 is how an empty pixel looks.
The enlarged picture shows the thin black line with rings A (on it) and B (above it).
A black box and the checkerboard.
Everything below this comment is support code that displays the canvas and the pixel colours in the output. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (a canvas, colour swatches) in a captioned box inside the Console Output area (id previewContent). setTimeout(…, 0) waits until the text output has been printed, so graphics appear below it. The box and caption use demo- classes so they cannot affect the tutorial page’s own styles.
showCanvas() makes the drawing visible. It reads two optional settings: scale (how many times to enlarge the picture, useful for tiny canvases) and marks (pixels to point out). Because an OffscreenCanvas is never on the page, the helper copies it into a normal canvas with drawImage(). The copy is a snapshot taken at this moment. image-rendering: pixelated keeps enlarged pixels sharp, and the checkerboard background makes transparent areas visible.
A wrapper div (class demo-canvas-wrap) with position: relative lets the marker rings be placed on top of the canvas.
For each mark it adds a pink ring and a name at the pixel’s position, so you can match each line of text output to a place in the picture. The position is (x + 0.5) because a pixel covers the area from x to x + 1, so its centre is half a pixel further. Multiplying by scale keeps the ring on the right pixel when the picture is enlarged.
Shows the picture, with its markers, below the text output.
showSwatches() turns pixel values into colour boxes. This creates a flex row (class demo-swatch-row) to hold them.
Each sample has a name and an [r, g, b, a] array. The colour is built as an rgba() string; the alpha value is divided by 255 because CSS expects 0 to 1, while getImageData uses 0 to 255. A checkerboard sits behind the colour, so a transparent pixel shows as a checkerboard and a half-transparent pixel shows a mix. The numbers are printed under each box.
Shows the swatches below the text output.
globalAlpha and Real Color Blending
globalAlpha makes everything drawn afterward partially transparent. Reading the resulting pixel shows the actual blended color, not just an approximation.
What this code does: Fills the canvas with white, then draws a black square at 50% transparency (globalAlpha = 0.5) over the middle. A pixel inside the square (A) is a blend of black and white, around [128, 128, 128, 255], a mid-gray; a pixel outside it (B) is still pure white, [255, 255, 255, 255]. The picture shows the gray square on the white background and the colour boxes show both values.
const canvas = new OffscreenCanvas(100, 100);
const ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 100, 100);
ctx.globalAlpha = 0.5;
ctx.fillStyle = "black";
ctx.fillRect(20, 20, 60, 60);
ctx.globalAlpha = 1; // reset so later drawing is fully opaque again
const blended = ctx.getImageData(50, 50, 1, 1).data;
const plain = ctx.getImageData(5, 5, 1, 1).data;
console.log("A, 50% black over white:", Array.from(blended));
console.log("B, plain white background:", Array.from(plain));
showCanvas("Half-transparent black square over white", canvas, { scale: 3, marks: [{ x: 50, y: 50, name: "A" }, { x: 5, y: 5, name: "B" }] });
showSwatches("Colours read back", [{ name: "A", rgba: blended }, { name: "B", rgba: plain }]);
// ===== Helpers below are not part of the lesson =====
function showPreview(label, node) {
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-preview-box";
box.innerHTML = "<p class='demo-preview-label'>" + label + "</p>";
box.appendChild(node);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
function showCanvas(label, source, options) {
const scale = (options && options.scale) || 1;
const marks = (options && options.marks) || [];
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.cssText = "display:block;width:" + source.width * scale + "px;height:" + source.height * scale + "px;image-rendering:pixelated;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;";
const wrap = document.createElement("div");
wrap.className = "demo-canvas-wrap";
wrap.style.cssText = "position:relative;display:inline-block;";
wrap.appendChild(copy);
marks.forEach((m) => {
const ring = document.createElement("span");
ring.className = "demo-canvas-mark";
ring.style.cssText = "position:absolute;box-sizing:border-box;width:12px;height:12px;border:2px solid #d946ef;border-radius:50%;left:" + ((m.x + 0.5) * scale - 6) + "px;top:" + ((m.y + 0.5) * scale - 6) + "px;";
ring.innerHTML = "<b style='position:absolute;left:12px;top:-4px;font:bold 12px sans-serif;color:#a21caf'>" + m.name + "</b>";
wrap.appendChild(ring);
});
showPreview(label, wrap);
}
function showSwatches(label, samples) {
const row = document.createElement("div");
row.className = "demo-swatch-row";
row.style.cssText = "display:flex;flex-wrap:wrap;gap:8px;font:12px monospace;color:#0f172a;";
samples.forEach((s) => {
const item = document.createElement("div");
item.className = "demo-swatch";
const color = "rgba(" + s.rgba[0] + "," + s.rgba[1] + "," + s.rgba[2] + "," + s.rgba[3] / 255 + ")";
item.innerHTML = "<div style='width:96px;height:36px;border:1px solid #94a3b8;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 12px 12px'>"
+ "<div style='width:100%;height:100%;background:" + color + "'></div></div>"
+ s.name + ": " + Array.from(s.rgba).join(", ");
row.appendChild(item);
});
showPreview(label, row);
}Creates an off-screen canvas and gets its 2D context. Every drawing call and every pixel read below goes through ctx.
A solid white base, so the blend with the next shape has something to mix with.
globalAlpha (0 to 1) applies to everything drawn after it, so the black square is painted at half strength and mixes with the white underneath. The last line resets it to 1; if you forget, every later shape would stay half transparent.
(50, 50) is inside the black square; (5, 5) is in the untouched white margin.
The blend is 50% x 0 (black) + 50% x 255 (white) = 127.5, which the canvas stores as about 128 for red, green and blue. Alpha is 255 because the white base underneath is opaque. B stays [255, 255, 255, 255]. Note that globalAlpha runs from 0 to 1, but the pixel values you read run from 0 to 255.
Shows the gray square on white, with A inside it and B outside it.
A mid-gray box for A and a white box for B.
Everything below this comment is support code that displays the canvas and the pixel colours in the output. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (a canvas, colour swatches) in a captioned box inside the Console Output area (id previewContent). setTimeout(…, 0) waits until the text output has been printed, so graphics appear below it. The box and caption use demo- classes so they cannot affect the tutorial page’s own styles.
showCanvas() makes the drawing visible. It reads two optional settings: scale (how many times to enlarge the picture, useful for tiny canvases) and marks (pixels to point out). Because an OffscreenCanvas is never on the page, the helper copies it into a normal canvas with drawImage(). The copy is a snapshot taken at this moment. image-rendering: pixelated keeps enlarged pixels sharp, and the checkerboard background makes transparent areas visible.
A wrapper div (class demo-canvas-wrap) with position: relative lets the marker rings be placed on top of the canvas.
For each mark it adds a pink ring and a name at the pixel’s position, so you can match each line of text output to a place in the picture. The position is (x + 0.5) because a pixel covers the area from x to x + 1, so its centre is half a pixel further. Multiplying by scale keeps the ring on the right pixel when the picture is enlarged.
Shows the picture, with its markers, below the text output.
showSwatches() turns pixel values into colour boxes. This creates a flex row (class demo-swatch-row) to hold them.
Each sample has a name and an [r, g, b, a] array. The colour is built as an rgba() string; the alpha value is divided by 255 because CSS expects 0 to 1, while getImageData uses 0 to 255. A checkerboard sits behind the colour, so a transparent pixel shows as a checkerboard and a half-transparent pixel shows a mix. The numbers are printed under each box.
Shows the swatches below the text output.
The result for pixel A lands around [128, 128, 128, 255], a genuine mid-gray produced by real alpha blending, not a hardcoded guess. The exact value can differ by one between browsers because of rounding.
Draw Order Matters
Shapes drawn later appear on top of shapes drawn earlier, exactly like layers. Overlapping regions take on the most recently drawn color.
What this code does: Draws a red square, then a blue square that overlaps its lower-right corner. Pixel A is in the red-only area and reads [255, 0, 0, 255]; pixel B is in the overlap and reads blue, [0, 0, 255, 255], because the blue square was drawn last and covers the red. Swap the order of the two drawing blocks and run again to see the overlap turn red.
const canvas = new OffscreenCanvas(100, 100);
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 60, 60);
ctx.fillStyle = "blue";
ctx.fillRect(40, 40, 60, 60);
const redOnly = ctx.getImageData(10, 10, 1, 1).data;
const overlap = ctx.getImageData(50, 50, 1, 1).data;
console.log("A, non-overlapping area (red only):", Array.from(redOnly));
console.log("B, overlap area (blue was drawn last):", Array.from(overlap));
showCanvas("Blue drawn after red", canvas, { scale: 3, marks: [{ x: 10, y: 10, name: "A" }, { x: 50, y: 50, name: "B" }] });
showSwatches("Colours read back", [{ name: "A", rgba: redOnly }, { name: "B", rgba: overlap }]);
// ===== Helpers below are not part of the lesson =====
function showPreview(label, node) {
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-preview-box";
box.innerHTML = "<p class='demo-preview-label'>" + label + "</p>";
box.appendChild(node);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
function showCanvas(label, source, options) {
const scale = (options && options.scale) || 1;
const marks = (options && options.marks) || [];
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.cssText = "display:block;width:" + source.width * scale + "px;height:" + source.height * scale + "px;image-rendering:pixelated;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;";
const wrap = document.createElement("div");
wrap.className = "demo-canvas-wrap";
wrap.style.cssText = "position:relative;display:inline-block;";
wrap.appendChild(copy);
marks.forEach((m) => {
const ring = document.createElement("span");
ring.className = "demo-canvas-mark";
ring.style.cssText = "position:absolute;box-sizing:border-box;width:12px;height:12px;border:2px solid #d946ef;border-radius:50%;left:" + ((m.x + 0.5) * scale - 6) + "px;top:" + ((m.y + 0.5) * scale - 6) + "px;";
ring.innerHTML = "<b style='position:absolute;left:12px;top:-4px;font:bold 12px sans-serif;color:#a21caf'>" + m.name + "</b>";
wrap.appendChild(ring);
});
showPreview(label, wrap);
}
function showSwatches(label, samples) {
const row = document.createElement("div");
row.className = "demo-swatch-row";
row.style.cssText = "display:flex;flex-wrap:wrap;gap:8px;font:12px monospace;color:#0f172a;";
samples.forEach((s) => {
const item = document.createElement("div");
item.className = "demo-swatch";
const color = "rgba(" + s.rgba[0] + "," + s.rgba[1] + "," + s.rgba[2] + "," + s.rgba[3] / 255 + ")";
item.innerHTML = "<div style='width:96px;height:36px;border:1px solid #94a3b8;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 12px 12px'>"
+ "<div style='width:100%;height:100%;background:" + color + "'></div></div>"
+ s.name + ": " + Array.from(s.rgba).join(", ");
row.appendChild(item);
});
showPreview(label, row);
}Creates an off-screen canvas and gets its 2D context. Every drawing call and every pixel read below goes through ctx.
Covers x 0 to 60 and y 0 to 60. It is drawn first, so it is the bottom layer.
Covers x 40 to 100 and y 40 to 100, so the 20×20 area from 40 to 60 is covered by both shapes. Because opaque paint replaces what is underneath, the blue wins there.
(10, 10) is only inside the red square. (50, 50) is inside both squares.
A is red [255, 0, 0, 255]. B is blue [0, 0, 255, 255]: the red underneath is gone. Canvas has no layers; later drawing simply overwrites the pixels.
A sits in the red-only part, B in the overlapping corner.
A red box and a blue box.
Everything below this comment is support code that displays the canvas and the pixel colours in the output. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (a canvas, colour swatches) in a captioned box inside the Console Output area (id previewContent). setTimeout(…, 0) waits until the text output has been printed, so graphics appear below it. The box and caption use demo- classes so they cannot affect the tutorial page’s own styles.
showCanvas() makes the drawing visible. It reads two optional settings: scale (how many times to enlarge the picture, useful for tiny canvases) and marks (pixels to point out). Because an OffscreenCanvas is never on the page, the helper copies it into a normal canvas with drawImage(). The copy is a snapshot taken at this moment. image-rendering: pixelated keeps enlarged pixels sharp, and the checkerboard background makes transparent areas visible.
A wrapper div (class demo-canvas-wrap) with position: relative lets the marker rings be placed on top of the canvas.
For each mark it adds a pink ring and a name at the pixel’s position, so you can match each line of text output to a place in the picture. The position is (x + 0.5) because a pixel covers the area from x to x + 1, so its centre is half a pixel further. Multiplying by scale keeps the ring on the right pixel when the picture is enlarged.
Shows the picture, with its markers, below the text output.
showSwatches() turns pixel values into colour boxes. This creates a flex row (class demo-swatch-row) to hold them.
Each sample has a name and an [r, g, b, a] array. The colour is built as an rgba() string; the alpha value is divided by 255 because CSS expects 0 to 1, while getImageData uses 0 to 255. A checkerboard sits behind the colour, so a transparent pixel shows as a checkerboard and a half-transparent pixel shows a mix. The numbers are printed under each box.
Shows the swatches below the text output.
Reading a Full Row of Pixel Data
getImageData() returns a flat array: 4 numbers (r, g, b, a) per pixel, left to right, top to bottom.
What this code does: Creates a tiny 5×1 canvas (five pixels in one row), paints the first two pixels red and the last three blue, then reads the whole row in one getImageData() call. A loop picks each pixel’s four values out of the flat array using the index x * 4 and prints them. The canvas is enlarged 50 times so you can see all five pixels, with a ring on each, and a colour box for each pixel shows the values read.
const canvas = new OffscreenCanvas(5, 1);
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 2, 1);
ctx.fillStyle = "blue";
ctx.fillRect(2, 0, 3, 1);
const row = ctx.getImageData(0, 0, 5, 1).data;
console.log("Array length:", row.length, "(5 pixels x 4 values)");
const marks = [];
const samples = [];
for (let x = 0; x < 5; x++) {
const r = row[x * 4];
const g = row[x * 4 + 1];
const b = row[x * 4 + 2];
const a = row[x * 4 + 3];
console.log("Pixel " + x + ":", r, g, b, a);
marks.push({ x: x, y: 0, name: String(x) });
samples.push({ name: "Pixel " + x, rgba: [r, g, b, a] });
}
showCanvas("The 5x1 canvas enlarged 50 times", canvas, { scale: 50, marks: marks });
showSwatches("Each pixel read from the array", samples);
// ===== Helpers below are not part of the lesson =====
function showPreview(label, node) {
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-preview-box";
box.innerHTML = "<p class='demo-preview-label'>" + label + "</p>";
box.appendChild(node);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
function showCanvas(label, source, options) {
const scale = (options && options.scale) || 1;
const marks = (options && options.marks) || [];
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.cssText = "display:block;width:" + source.width * scale + "px;height:" + source.height * scale + "px;image-rendering:pixelated;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;";
const wrap = document.createElement("div");
wrap.className = "demo-canvas-wrap";
wrap.style.cssText = "position:relative;display:inline-block;";
wrap.appendChild(copy);
marks.forEach((m) => {
const ring = document.createElement("span");
ring.className = "demo-canvas-mark";
ring.style.cssText = "position:absolute;box-sizing:border-box;width:12px;height:12px;border:2px solid #d946ef;border-radius:50%;left:" + ((m.x + 0.5) * scale - 6) + "px;top:" + ((m.y + 0.5) * scale - 6) + "px;";
ring.innerHTML = "<b style='position:absolute;left:12px;top:-4px;font:bold 12px sans-serif;color:#a21caf'>" + m.name + "</b>";
wrap.appendChild(ring);
});
showPreview(label, wrap);
}
function showSwatches(label, samples) {
const row = document.createElement("div");
row.className = "demo-swatch-row";
row.style.cssText = "display:flex;flex-wrap:wrap;gap:8px;font:12px monospace;color:#0f172a;";
samples.forEach((s) => {
const item = document.createElement("div");
item.className = "demo-swatch";
const color = "rgba(" + s.rgba[0] + "," + s.rgba[1] + "," + s.rgba[2] + "," + s.rgba[3] / 255 + ")";
item.innerHTML = "<div style='width:96px;height:36px;border:1px solid #94a3b8;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 12px 12px'>"
+ "<div style='width:100%;height:100%;background:" + color + "'></div></div>"
+ s.name + ": " + Array.from(s.rgba).join(", ");
row.appendChild(item);
});
showPreview(label, row);
}Creates an off-screen canvas and gets its 2D context. Every drawing call and every pixel read below goes through ctx.
fillRect(0, 0, 2, 1) paints x = 0 and x = 1 in the single row: two pixels wide and one pixel high.
Paints x = 2, 3 and 4, the rest of the row.
One call reads all five pixels. The result is a flat list: pixel 0’s red, green, blue, alpha, then pixel 1’s, and so on. That makes 5 x 4 = 20 numbers, which the log confirms.
marks will hold a position for each ring and samples a colour for each swatch.
x counts the pixels from 0 to 4. Pixel x starts at array position x * 4, so red is at x * 4, green at x * 4 + 1, blue at x * 4 + 2 and alpha at x * 4 + 3. The same rule works for any canvas size (add y * width * 4 for later rows).
Reads the other three numbers of the same pixel.
Prints each pixel’s values: pixels 0 and 1 are 255, 0, 0, 255 (red) and pixels 2, 3 and 4 are 0, 0, 255, 255 (blue). The marks and samples lists are filled for the pictures.
Scaling by 50 turns each of the five pixels into a 50×50 square, with a numbered ring on each.
One colour box per pixel, with the numbers that came from the array.
Everything below this comment is support code that displays the canvas and the pixel colours in the output. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (a canvas, colour swatches) in a captioned box inside the Console Output area (id previewContent). setTimeout(…, 0) waits until the text output has been printed, so graphics appear below it. The box and caption use demo- classes so they cannot affect the tutorial page’s own styles.
showCanvas() makes the drawing visible. It reads two optional settings: scale (how many times to enlarge the picture, useful for tiny canvases) and marks (pixels to point out). Because an OffscreenCanvas is never on the page, the helper copies it into a normal canvas with drawImage(). The copy is a snapshot taken at this moment. image-rendering: pixelated keeps enlarged pixels sharp, and the checkerboard background makes transparent areas visible.
A wrapper div (class demo-canvas-wrap) with position: relative lets the marker rings be placed on top of the canvas.
For each mark it adds a pink ring and a name at the pixel’s position, so you can match each line of text output to a place in the picture. The position is (x + 0.5) because a pixel covers the area from x to x + 1, so its centre is half a pixel further. Multiplying by scale keeps the ring on the right pixel when the picture is enlarged.
Shows the picture, with its markers, below the text output.
showSwatches() turns pixel values into colour boxes. This creates a flex row (class demo-swatch-row) to hold them.
Each sample has a name and an [r, g, b, a] array. The colour is built as an rgba() string; the alpha value is divided by 255 because CSS expects 0 to 1, while getImageData uses 0 to 255. A checkerboard sits behind the colour, so a transparent pixel shows as a checkerboard and a half-transparent pixel shows a mix. The numbers are printed under each box.
Shows the swatches below the text output.
<canvas> vs. OffscreenCanvas
| Feature | <canvas> Element | OffscreenCanvas |
|---|---|---|
| Requires the DOM? | Yes | No |
| Renders visibly on screen? | Yes, automatically | No, it stays in memory |
| Works inside a Web Worker? | No | Yes |
| Same drawing methods (fillRect, arc, stroke)? | Yes | Yes, identical 2D API |
| Typical use case | On-page graphics, games, charts | Background rendering, image processing, tests |
Common Mistakes
- Forgetting
beginPath()before starting a new shape, which can carry over unwanted path segments into the next fill or stroke. - Expecting
toDataURL()to exist onOffscreenCanvas. It doesn’t; useconvertToBlob()ortransferToImageBitmap()instead. - Forgetting that alpha values in
getImageData()run from0–255, whileglobalAlphais set on a0–1scale. - Drawing coordinates outside the canvas’s bounds and being surprised nothing appears; canvas drawing simply clips silently, with no error.
- Assuming
fillStyleresets automatically between draw calls; it stays set until you explicitly change it again.
Best Practices
- Use
getImageData()to write automated checks that your rendering logic actually draws what you expect. - Keep
getImageData()calls small and targeted; reading large regions repeatedly is relatively expensive. - Always pair
beginPath()with each new shape to avoid unintended leftover path segments. - Reset
globalAlphaback to1after you’re done drawing something semi-transparent, so it doesn’t leak into later drawing calls. - Reach for
OffscreenCanvaswhen rendering needs to happen off the main thread or without a visible page at all.
Quick Summary
canvas.getContext("2d")(ornew OffscreenCanvas()) gives you an object with all the drawing methods.fillRect(),arc(),stroke(), andclearRect()all genuinely modify the canvas’s real pixel data.getImageData(x, y, w, h)reads back real[r, g, b, a]values, proving exactly what was drawn.- Shapes drawn later appear on top of shapes drawn earlier.
OffscreenCanvassupports the same 2D drawing API as a regular<canvas>, but works without a visible page, including inside Web Workers.
Try It Yourself
Modify the code below. Try changing the shapes’ colors and positions, then sample a few different pixel coordinates to see the real values change.
What this code does: Combines a background, a filled circle and a diagonal line on a 150×150 canvas, then samples one pixel in each of the three areas: the background (A), the circle’s centre (B) and a point on the diagonal line (C). The picture shows the finished drawing with the three pixels marked, and the colour boxes show what each one contains. Change the colours or positions, then sample other coordinates.
const canvas = new OffscreenCanvas(150, 150);
const ctx = canvas.getContext("2d");
ctx.fillStyle = "lightyellow";
ctx.fillRect(0, 0, 150, 150);
ctx.beginPath();
ctx.arc(75, 75, 40, 0, Math.PI * 2);
ctx.fillStyle = "orangered";
ctx.fill();
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(150, 150);
ctx.stroke();
const background = ctx.getImageData(5, 5, 1, 1).data;
const circle = ctx.getImageData(75, 75, 1, 1).data;
const line = ctx.getImageData(20, 20, 1, 1).data;
console.log("A, background corner:", Array.from(background));
console.log("B, center of circle:", Array.from(circle));
console.log("C, on the diagonal line:", Array.from(line));
showCanvas("The finished drawing", canvas, { scale: 2, marks: [{ x: 5, y: 5, name: "A" }, { x: 75, y: 75, name: "B" }, { x: 20, y: 20, name: "C" }] });
showSwatches("Colours read back", [{ name: "A", rgba: background }, { name: "B", rgba: circle }, { name: "C", rgba: line }]);
// ===== Helpers below are not part of the lesson =====
function showPreview(label, node) {
setTimeout(() => {
const box = document.createElement("div");
box.className = "demo-preview-box";
box.innerHTML = "<p class='demo-preview-label'>" + label + "</p>";
box.appendChild(node);
document.getElementById("previewContent").appendChild(box);
}, 0);
}
function showCanvas(label, source, options) {
const scale = (options && options.scale) || 1;
const marks = (options && options.marks) || [];
const copy = document.createElement("canvas");
copy.width = source.width;
copy.height = source.height;
copy.getContext("2d").drawImage(source, 0, 0);
copy.style.cssText = "display:block;width:" + source.width * scale + "px;height:" + source.height * scale + "px;image-rendering:pixelated;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;";
const wrap = document.createElement("div");
wrap.className = "demo-canvas-wrap";
wrap.style.cssText = "position:relative;display:inline-block;";
wrap.appendChild(copy);
marks.forEach((m) => {
const ring = document.createElement("span");
ring.className = "demo-canvas-mark";
ring.style.cssText = "position:absolute;box-sizing:border-box;width:12px;height:12px;border:2px solid #d946ef;border-radius:50%;left:" + ((m.x + 0.5) * scale - 6) + "px;top:" + ((m.y + 0.5) * scale - 6) + "px;";
ring.innerHTML = "<b style='position:absolute;left:12px;top:-4px;font:bold 12px sans-serif;color:#a21caf'>" + m.name + "</b>";
wrap.appendChild(ring);
});
showPreview(label, wrap);
}
function showSwatches(label, samples) {
const row = document.createElement("div");
row.className = "demo-swatch-row";
row.style.cssText = "display:flex;flex-wrap:wrap;gap:8px;font:12px monospace;color:#0f172a;";
samples.forEach((s) => {
const item = document.createElement("div");
item.className = "demo-swatch";
const color = "rgba(" + s.rgba[0] + "," + s.rgba[1] + "," + s.rgba[2] + "," + s.rgba[3] / 255 + ")";
item.innerHTML = "<div style='width:96px;height:36px;border:1px solid #94a3b8;background:repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 12px 12px'>"
+ "<div style='width:100%;height:100%;background:" + color + "'></div></div>"
+ s.name + ": " + Array.from(s.rgba).join(", ");
row.appendChild(item);
});
showPreview(label, row);
}Creates an off-screen canvas and gets its 2D context. Every drawing call and every pixel read below goes through ctx.
Fills the whole canvas with light yellow, rgb(255, 255, 224).
An orange-red filled circle at the centre with a radius of 40.
A 3-pixel black line from the top-left corner to the bottom-right corner, drawn last, so it passes over the circle. beginPath() before it keeps the line separate from the circle’s path.
(5, 5) is only background. (75, 75) is the centre of the circle, which the diagonal line also crosses, because it runs through (75, 75). (20, 20) is on the diagonal, before the circle begins.
A is [255, 255, 224, 255] (light yellow). C is [0, 0, 0, 255] (black). B is black as well, because the line was drawn after the circle and passes exactly through its centre. Move the sample point to (75, 60), which is in the circle but off the line, to see orangered, [255, 69, 0, 255].
Rings A, B and C show where each sample was taken; at scale 2 the canvas is 300×300 on screen.
Colour boxes with the numbers returned for A, B and C.
Everything below this comment is support code that displays the canvas and the pixel colours in the output. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (a canvas, colour swatches) in a captioned box inside the Console Output area (id previewContent). setTimeout(…, 0) waits until the text output has been printed, so graphics appear below it. The box and caption use demo- classes so they cannot affect the tutorial page’s own styles.
showCanvas() makes the drawing visible. It reads two optional settings: scale (how many times to enlarge the picture, useful for tiny canvases) and marks (pixels to point out). Because an OffscreenCanvas is never on the page, the helper copies it into a normal canvas with drawImage(). The copy is a snapshot taken at this moment. image-rendering: pixelated keeps enlarged pixels sharp, and the checkerboard background makes transparent areas visible.
A wrapper div (class demo-canvas-wrap) with position: relative lets the marker rings be placed on top of the canvas.
For each mark it adds a pink ring and a name at the pixel’s position, so you can match each line of text output to a place in the picture. The position is (x + 0.5) because a pixel covers the area from x to x + 1, so its centre is half a pixel further. Multiplying by scale keeps the ring on the right pixel when the picture is enlarged.
Shows the picture, with its markers, below the text output.
showSwatches() turns pixel values into colour boxes. This creates a flex row (class demo-swatch-row) to hold them.
Each sample has a name and an [r, g, b, a] array. The colour is built as an rgba() string; the alpha value is divided by 255 because CSS expects 0 to 1, while getImageData uses 0 to 255. A checkerboard sits behind the colour, so a transparent pixel shows as a checkerboard and a half-transparent pixel shows a mix. The numbers are printed under each box.
Shows the swatches below the text output.
Tip: When you want to be certain your canvas code is drawing exactly what you intend, sample real pixels with getImageData() instead of just trusting the code “looks right”. It’s the same technique used in this lesson’s examples.
Understanding the real drawing and pixel-reading side of <canvas> complements the broader API tour in the JavaScript Canvas API lesson, and is a genuinely useful technique for testing rendering logic in real projects.
🧪 Test Your JavaScript Code
Edit the code on the left and click “Run Code” to see the console output on the right.
📝 JavaScript Code
👁 Console Output
Click “Run Code” to see the output here.
Ctrl + Enter
to run code
Esc
to close
Code Explanation
The complete example stays visible. Use Previous and Next to move through its logical blocks.
Complete code · highlighted block
Explanation
Select Next to begin exploring the code.
Block 0 of 0