Image Compression & Export Get Certified
Once an image is on a canvas you can export it in different formats and quality levels using toBlob() or toDataURL(). This is how browser-based image compressors, resize tools, and upload optimizers work.
Exporting a Canvas as a Blob
canvas.toBlob() is the modern way to get a compressed file from a canvas. The result is delivered asynchronously through a callback. In this lesson the examples draw a sample picture with makePhoto() and export it with canvasToBlob(), both placed at the bottom of each example. canvasToBlob() is a stand-in that returns the same kind of Blob immediately (it is built on toDataURL()), so the real file sizes can be printed and the pictures shown.
What this code does: Draws a 400×300 sample picture, exports it as a JPEG at quality 0.8 and prints the real format and size of the resulting file. The exported JPEG is then displayed below the text output, with its size in the caption. The comment shows how the same export looks with the real, asynchronous toBlob().
const canvas = makePhoto(400, 300);
// Real page (asynchronous):
// canvas.toBlob((blob) => { /* use blob here */ }, "image/jpeg", 0.8);
// Here canvasToBlob() gives us the same kind of Blob immediately.
const blob = canvasToBlob(canvas, "image/jpeg", 0.8);
console.log("Format:", blob.type);
console.log("Size:", (blob.size / 1024).toFixed(1), "KB");
console.log("Canvas pixels:", canvas.width + "x" + canvas.height);
showBlob("Exported JPEG at quality 0.8", blob);
// ===== 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 makePhoto(width, height) {
const c = document.createElement("canvas");
c.width = width;
c.height = height;
const g = c.getContext("2d");
const sky = g.createLinearGradient(0, 0, 0, height);
sky.addColorStop(0, "#1e3a8a");
sky.addColorStop(0.6, "#f59e0b");
sky.addColorStop(1, "#7c2d12");
g.fillStyle = sky;
g.fillRect(0, 0, width, height);
g.fillStyle = "#fde68a";
g.beginPath();
g.arc(width * 0.7, height * 0.35, height * 0.12, 0, Math.PI * 2);
g.fill();
g.fillStyle = "#14532d";
for (let i = 0; i < 6; i++) {
g.beginPath();
g.arc(width * (i / 5), height * 0.9, height * 0.22, 0, Math.PI * 2);
g.fill();
}
let seed = 7;
for (let i = 0; i < (width * height) / 40; i++) {
seed = (seed * 16807) % 2147483647;
const x = seed % width;
seed = (seed * 16807) % 2147483647;
const y = seed % height;
g.fillStyle = "rgba(255, 255, 255, " + ((seed % 100) / 600) + ")";
g.fillRect(x, y, 2, 2);
}
return c;
}
function canvasToBlob(canvas, type, quality) {
const dataUrl = canvas.toDataURL(type, quality);
const mime = dataUrl.slice(5, dataUrl.indexOf(";"));
const binary = atob(dataUrl.split(",")[1]);
const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
return new Blob([bytes], { type: mime });
}
function showBlob(label, blob) {
const img = document.createElement("img");
img.className = "demo-export-image";
img.style.cssText = "max-width:100%;border-radius:6px;display:block;";
img.onload = () => URL.revokeObjectURL(img.src);
img.src = URL.createObjectURL(blob);
showPreview(label + " (" + (blob.size / 1024).toFixed(1) + " KB, " + blob.type + ")", img);
}makePhoto(400, 300) returns a canvas with a sample scene (sky, sun, hills and fine texture). In your own project this would be a canvas you drew on or an image you drew onto a canvas with drawImage().
The real toBlob(callback, type, quality) takes the file type, a quality from 0 to 1 and a function that receives the Blob later. canvasToBlob(canvas, type, quality) takes the same arguments but returns the Blob straight away. A Blob is a file-like object holding the compressed bytes.
blob.type is the format that was really produced and blob.size is its size in bytes (divided by 1024 to give KB). The last line prints the pixel size of the canvas for comparison: 400 x 300 = 120,000 pixels.
Displays the exported JPEG below the text output, with its size and type in the caption.
Everything below this comment is support code that draws the sample picture, exports it and shows the results. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (an image, a bar chart) 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.
makePhoto(width, height) draws a photo-like scene on a new canvas so there is something real to compress. Because it uses fractions of width and height, the same scene can be made at any size.
A vertical gradient (top to bottom) from deep blue through orange to brown fills the canvas.
A pale yellow circle placed at 70% of the width and 35% of the height.
Six overlapping dark green circles along the bottom edge form a hill line.
Scatters thousands of tiny, faintly white 2×2 dots at pseudo-random positions. A simple formula (a seeded number generator) is used instead of Math.random(), so the picture is identical every time you run it. Fine texture matters: smooth images compress very well, noisy ones do not, just like real photos.
Hands the finished canvas to the caller.
A stand-in for canvas.toBlob() that returns the Blob immediately, so the example can print sizes. toDataURL(type, quality) runs the browser’s real image encoder and returns the file as a data URL. The quality argument (0 to 1) only matters for image/jpeg and image/webp; PNG ignores it.
A data URL looks like data:image/jpeg;base64,AAAA… Line 1 reads the type that was actually used (important: if the browser cannot encode the requested type, it silently returns PNG). Then atob() decodes the base64 part into raw bytes, and Uint8Array.from turns them into a byte array.
Wraps the bytes in a real Blob. blob.size is the file size in bytes and blob.type is the format, which is exactly what the callback of toBlob() would give you.
Creates an img element (class demo-export-image) that will display the exported file.
URL.createObjectURL(blob) makes a temporary address that points to the Blob in memory, and assigning it to src displays the picture. Once the image has loaded, onload calls URL.revokeObjectURL() to release that memory, which is the clean-up step the lesson recommends.
Shows the image below the text output with a caption that includes the file size and the real format.
How Quality Affects File Size
Lowering the quality value (0–1) reduces file size for JPEG and WebP, with a trade-off in visual fidelity.
What this code does: Exports the same picture as a JPEG at three quality levels (0.9, 0.5 and 0.1), prints each real file size and shows all three exported images plus a bar chart of the sizes. Look at the pictures as well as the numbers: at 0.1 the file is tiny but blocky artefacts become visible, which is the trade-off you are choosing.
const canvas = makePhoto(400, 300);
const qualities = [0.9, 0.5, 0.1];
const results = [];
qualities.forEach((quality) => {
const blob = canvasToBlob(canvas, "image/jpeg", quality);
console.log("JPEG quality " + quality + ":", (blob.size / 1024).toFixed(1), "KB");
results.push({ label: "quality " + quality, size: blob.size });
showBlob("JPEG quality " + quality, blob);
});
showBars("File size by quality", results);
// ===== 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 makePhoto(width, height) {
const c = document.createElement("canvas");
c.width = width;
c.height = height;
const g = c.getContext("2d");
const sky = g.createLinearGradient(0, 0, 0, height);
sky.addColorStop(0, "#1e3a8a");
sky.addColorStop(0.6, "#f59e0b");
sky.addColorStop(1, "#7c2d12");
g.fillStyle = sky;
g.fillRect(0, 0, width, height);
g.fillStyle = "#fde68a";
g.beginPath();
g.arc(width * 0.7, height * 0.35, height * 0.12, 0, Math.PI * 2);
g.fill();
g.fillStyle = "#14532d";
for (let i = 0; i < 6; i++) {
g.beginPath();
g.arc(width * (i / 5), height * 0.9, height * 0.22, 0, Math.PI * 2);
g.fill();
}
let seed = 7;
for (let i = 0; i < (width * height) / 40; i++) {
seed = (seed * 16807) % 2147483647;
const x = seed % width;
seed = (seed * 16807) % 2147483647;
const y = seed % height;
g.fillStyle = "rgba(255, 255, 255, " + ((seed % 100) / 600) + ")";
g.fillRect(x, y, 2, 2);
}
return c;
}
function canvasToBlob(canvas, type, quality) {
const dataUrl = canvas.toDataURL(type, quality);
const mime = dataUrl.slice(5, dataUrl.indexOf(";"));
const binary = atob(dataUrl.split(",")[1]);
const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
return new Blob([bytes], { type: mime });
}
function showBlob(label, blob) {
const img = document.createElement("img");
img.className = "demo-export-image";
img.style.cssText = "max-width:100%;border-radius:6px;display:block;";
img.onload = () => URL.revokeObjectURL(img.src);
img.src = URL.createObjectURL(blob);
showPreview(label + " (" + (blob.size / 1024).toFixed(1) + " KB, " + blob.type + ")", img);
}
function showBars(title, items) {
const wrap = document.createElement("div");
wrap.className = "demo-bars";
wrap.style.cssText = "font:13px sans-serif;color:#0f172a;max-width:420px;";
const max = Math.max(...items.map((item) => item.size));
items.forEach((item) => {
const row = document.createElement("div");
row.className = "demo-bar-row";
row.style.cssText = "display:flex;align-items:center;gap:8px;margin:4px 0;";
row.innerHTML = "<span style='display:inline-block;width:95px'>" + item.label + "</span>"
+ "<div style='flex:1;background:#e2e8f0;border-radius:4px'>"
+ "<div style='height:16px;border-radius:4px;background:#4f46e5;width:" + (item.size / max * 100) + "%'></div></div>"
+ "<span style='display:inline-block;width:75px;text-align:right'>" + (item.size / 1024).toFixed(1) + " KB</span>";
wrap.appendChild(row);
});
showPreview(title, wrap);
}One picture, a list of three quality values to try (1 is best quality and largest file, 0 is worst quality and smallest), and an empty results array that will collect the sizes for the bar chart.
forEach runs the block three times; quality is 0.9, then 0.5, then 0.1. Each time the same canvas is exported as a JPEG with that quality.
Prints the size in KB, stores a label and the byte size for the chart, and shows the exported image. Comparing the three pictures shows what the quality number really changes. The closing }); ends the loop.
Draws one bar per quality level. The bars shrink as quality drops, but not in a straight line: the biggest savings come from the first reductions.
Everything below this comment is support code that draws the sample picture, exports it and shows the results. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (an image, a bar chart) 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.
makePhoto(width, height) draws a photo-like scene on a new canvas so there is something real to compress. Because it uses fractions of width and height, the same scene can be made at any size.
A vertical gradient (top to bottom) from deep blue through orange to brown fills the canvas.
A pale yellow circle placed at 70% of the width and 35% of the height.
Six overlapping dark green circles along the bottom edge form a hill line.
Scatters thousands of tiny, faintly white 2×2 dots at pseudo-random positions. A simple formula (a seeded number generator) is used instead of Math.random(), so the picture is identical every time you run it. Fine texture matters: smooth images compress very well, noisy ones do not, just like real photos.
Hands the finished canvas to the caller.
A stand-in for canvas.toBlob() that returns the Blob immediately, so the example can print sizes. toDataURL(type, quality) runs the browser’s real image encoder and returns the file as a data URL. The quality argument (0 to 1) only matters for image/jpeg and image/webp; PNG ignores it.
A data URL looks like data:image/jpeg;base64,AAAA… Line 1 reads the type that was actually used (important: if the browser cannot encode the requested type, it silently returns PNG). Then atob() decodes the base64 part into raw bytes, and Uint8Array.from turns them into a byte array.
Wraps the bytes in a real Blob. blob.size is the file size in bytes and blob.type is the format, which is exactly what the callback of toBlob() would give you.
Creates an img element (class demo-export-image) that will display the exported file.
URL.createObjectURL(blob) makes a temporary address that points to the Blob in memory, and assigning it to src displays the picture. Once the image has loaded, onload calls URL.revokeObjectURL() to release that memory, which is the clean-up step the lesson recommends.
Shows the image below the text output with a caption that includes the file size and the real format.
showBars(title, items) draws a simple horizontal bar chart. Each item has a label and a size in bytes. max is the largest size; it is used so that the longest bar fills the full width and the others are drawn in proportion.
For every item it builds a row with the label, a grey track, a coloured bar whose width is (size / max) x 100 percent, and the size in KB. Bars make it easy to compare sizes at a glance, which numbers alone do not.
Displays the finished chart below the text output.
Comparing Formats at the Same Quality
PNG, JPEG, and WebP compress very differently. WebP is usually the most space-efficient modern option, but the exact result depends on the picture.
What this code does: Exports the same picture as PNG, JPEG (quality 0.8) and WebP (quality 0.8), prints the three real sizes, and draws them as bars for comparison. A noisy photo-like image makes lossless PNG much larger than the lossy formats. If your browser cannot encode WebP it quietly returns PNG, and the example detects and reports that.
const canvas = makePhoto(400, 300);
const png = canvasToBlob(canvas, "image/png");
const jpeg = canvasToBlob(canvas, "image/jpeg", 0.8);
const webp = canvasToBlob(canvas, "image/webp", 0.8);
console.log("PNG:", (png.size / 1024).toFixed(1), "KB");
console.log("JPEG (0.8):", (jpeg.size / 1024).toFixed(1), "KB");
console.log("WebP (0.8):", (webp.size / 1024).toFixed(1), "KB");
if (webp.type !== "image/webp") {
console.log("This browser cannot encode WebP, so it returned", webp.type);
}
showBars("File size by format", [
{ label: "PNG", size: png.size },
{ label: "JPEG 0.8", size: jpeg.size },
{ label: "WebP 0.8", size: webp.size }
]);
// ===== 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 makePhoto(width, height) {
const c = document.createElement("canvas");
c.width = width;
c.height = height;
const g = c.getContext("2d");
const sky = g.createLinearGradient(0, 0, 0, height);
sky.addColorStop(0, "#1e3a8a");
sky.addColorStop(0.6, "#f59e0b");
sky.addColorStop(1, "#7c2d12");
g.fillStyle = sky;
g.fillRect(0, 0, width, height);
g.fillStyle = "#fde68a";
g.beginPath();
g.arc(width * 0.7, height * 0.35, height * 0.12, 0, Math.PI * 2);
g.fill();
g.fillStyle = "#14532d";
for (let i = 0; i < 6; i++) {
g.beginPath();
g.arc(width * (i / 5), height * 0.9, height * 0.22, 0, Math.PI * 2);
g.fill();
}
let seed = 7;
for (let i = 0; i < (width * height) / 40; i++) {
seed = (seed * 16807) % 2147483647;
const x = seed % width;
seed = (seed * 16807) % 2147483647;
const y = seed % height;
g.fillStyle = "rgba(255, 255, 255, " + ((seed % 100) / 600) + ")";
g.fillRect(x, y, 2, 2);
}
return c;
}
function canvasToBlob(canvas, type, quality) {
const dataUrl = canvas.toDataURL(type, quality);
const mime = dataUrl.slice(5, dataUrl.indexOf(";"));
const binary = atob(dataUrl.split(",")[1]);
const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
return new Blob([bytes], { type: mime });
}
function showBars(title, items) {
const wrap = document.createElement("div");
wrap.className = "demo-bars";
wrap.style.cssText = "font:13px sans-serif;color:#0f172a;max-width:420px;";
const max = Math.max(...items.map((item) => item.size));
items.forEach((item) => {
const row = document.createElement("div");
row.className = "demo-bar-row";
row.style.cssText = "display:flex;align-items:center;gap:8px;margin:4px 0;";
row.innerHTML = "<span style='display:inline-block;width:95px'>" + item.label + "</span>"
+ "<div style='flex:1;background:#e2e8f0;border-radius:4px'>"
+ "<div style='height:16px;border-radius:4px;background:#4f46e5;width:" + (item.size / max * 100) + "%'></div></div>"
+ "<span style='display:inline-block;width:75px;text-align:right'>" + (item.size / 1024).toFixed(1) + " KB</span>";
wrap.appendChild(row);
});
showPreview(title, wrap);
}One sample picture is used for all three exports so the comparison is fair.
PNG is lossless: it keeps every pixel exactly, so it takes no quality value (it would be ignored). JPEG and WebP are lossy: they discard detail the eye barely notices, controlled by the quality value, 0.8 for both here.
blob.size is in bytes; dividing by 1024 gives KB. On a photo-like picture PNG is usually the largest.
If a browser cannot encode the requested format, toDataURL falls back to PNG. Checking blob.type tells you what you really got. Always check this before assuming WebP worked.
One bar per format, all drawn in proportion to the largest, so the savings of lossy compression are visible at a glance.
Everything below this comment is support code that draws the sample picture, exports it and shows the results. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (an image, a bar chart) 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.
makePhoto(width, height) draws a photo-like scene on a new canvas so there is something real to compress. Because it uses fractions of width and height, the same scene can be made at any size.
A vertical gradient (top to bottom) from deep blue through orange to brown fills the canvas.
A pale yellow circle placed at 70% of the width and 35% of the height.
Six overlapping dark green circles along the bottom edge form a hill line.
Scatters thousands of tiny, faintly white 2×2 dots at pseudo-random positions. A simple formula (a seeded number generator) is used instead of Math.random(), so the picture is identical every time you run it. Fine texture matters: smooth images compress very well, noisy ones do not, just like real photos.
Hands the finished canvas to the caller.
A stand-in for canvas.toBlob() that returns the Blob immediately, so the example can print sizes. toDataURL(type, quality) runs the browser’s real image encoder and returns the file as a data URL. The quality argument (0 to 1) only matters for image/jpeg and image/webp; PNG ignores it.
A data URL looks like data:image/jpeg;base64,AAAA… Line 1 reads the type that was actually used (important: if the browser cannot encode the requested type, it silently returns PNG). Then atob() decodes the base64 part into raw bytes, and Uint8Array.from turns them into a byte array.
Wraps the bytes in a real Blob. blob.size is the file size in bytes and blob.type is the format, which is exactly what the callback of toBlob() would give you.
showBars(title, items) draws a simple horizontal bar chart. Each item has a label and a size in bytes. max is the largest size; it is used so that the longest bar fills the full width and the others are drawn in proportion.
For every item it builds a row with the label, a grey track, a coloured bar whose width is (size / max) x 100 percent, and the size in KB. Bars make it easy to compare sizes at a glance, which numbers alone do not.
Displays the finished chart below the text output.
Calculating the Percentage Saved
Comparing the compressed size against the original uncompressed size gives a clear savings percentage.
What this code does: Calculates the size of the raw pixel data (width x height x 4 bytes), exports the picture as a JPEG at quality 0.7 and works out how much smaller the file is as a percentage. The text output shows the numbers, a two-bar chart compares raw and compressed size, and the compressed picture is displayed.
const canvas = makePhoto(400, 300);
const rawSize = canvas.width * canvas.height * 4; // 4 bytes per pixel (R, G, B, A)
const blob = canvasToBlob(canvas, "image/jpeg", 0.7);
const savedPercent = (100 - (blob.size / rawSize) * 100).toFixed(1);
console.log("Raw pixel data:", (rawSize / 1024).toFixed(1), "KB");
console.log("Compressed size:", (blob.size / 1024).toFixed(1), "KB");
console.log("Reduced by:", savedPercent + "%");
showBars("Raw vs compressed", [
{ label: "Raw pixels", size: rawSize },
{ label: "JPEG 0.7", size: blob.size }
]);
showBlob("The compressed JPEG", blob);
// ===== 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 makePhoto(width, height) {
const c = document.createElement("canvas");
c.width = width;
c.height = height;
const g = c.getContext("2d");
const sky = g.createLinearGradient(0, 0, 0, height);
sky.addColorStop(0, "#1e3a8a");
sky.addColorStop(0.6, "#f59e0b");
sky.addColorStop(1, "#7c2d12");
g.fillStyle = sky;
g.fillRect(0, 0, width, height);
g.fillStyle = "#fde68a";
g.beginPath();
g.arc(width * 0.7, height * 0.35, height * 0.12, 0, Math.PI * 2);
g.fill();
g.fillStyle = "#14532d";
for (let i = 0; i < 6; i++) {
g.beginPath();
g.arc(width * (i / 5), height * 0.9, height * 0.22, 0, Math.PI * 2);
g.fill();
}
let seed = 7;
for (let i = 0; i < (width * height) / 40; i++) {
seed = (seed * 16807) % 2147483647;
const x = seed % width;
seed = (seed * 16807) % 2147483647;
const y = seed % height;
g.fillStyle = "rgba(255, 255, 255, " + ((seed % 100) / 600) + ")";
g.fillRect(x, y, 2, 2);
}
return c;
}
function canvasToBlob(canvas, type, quality) {
const dataUrl = canvas.toDataURL(type, quality);
const mime = dataUrl.slice(5, dataUrl.indexOf(";"));
const binary = atob(dataUrl.split(",")[1]);
const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
return new Blob([bytes], { type: mime });
}
function showBlob(label, blob) {
const img = document.createElement("img");
img.className = "demo-export-image";
img.style.cssText = "max-width:100%;border-radius:6px;display:block;";
img.onload = () => URL.revokeObjectURL(img.src);
img.src = URL.createObjectURL(blob);
showPreview(label + " (" + (blob.size / 1024).toFixed(1) + " KB, " + blob.type + ")", img);
}
function showBars(title, items) {
const wrap = document.createElement("div");
wrap.className = "demo-bars";
wrap.style.cssText = "font:13px sans-serif;color:#0f172a;max-width:420px;";
const max = Math.max(...items.map((item) => item.size));
items.forEach((item) => {
const row = document.createElement("div");
row.className = "demo-bar-row";
row.style.cssText = "display:flex;align-items:center;gap:8px;margin:4px 0;";
row.innerHTML = "<span style='display:inline-block;width:95px'>" + item.label + "</span>"
+ "<div style='flex:1;background:#e2e8f0;border-radius:4px'>"
+ "<div style='height:16px;border-radius:4px;background:#4f46e5;width:" + (item.size / max * 100) + "%'></div></div>"
+ "<span style='display:inline-block;width:75px;text-align:right'>" + (item.size / 1024).toFixed(1) + " KB</span>";
wrap.appendChild(row);
});
showPreview(title, wrap);
}Uncompressed, every pixel takes 4 bytes (red, green, blue and alpha). 400 x 300 x 4 = 480,000 bytes, about 468.8 KB. This is the baseline the savings are measured against.
Exports a JPEG at quality 0.7. blob.size / rawSize is the fraction of the original that remains; subtracting its percentage from 100 gives the percentage saved, and toFixed(1) keeps one decimal.
Prints the raw size, the compressed size and the saving, so students can check the arithmetic by hand.
Two bars: the raw pixel data and the JPEG. The shortness of the second bar is the saving in the percentage above.
Displays the exported JPEG so you can judge whether quality 0.7 still looks good.
Everything below this comment is support code that draws the sample picture, exports it and shows the results. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (an image, a bar chart) 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.
makePhoto(width, height) draws a photo-like scene on a new canvas so there is something real to compress. Because it uses fractions of width and height, the same scene can be made at any size.
A vertical gradient (top to bottom) from deep blue through orange to brown fills the canvas.
A pale yellow circle placed at 70% of the width and 35% of the height.
Six overlapping dark green circles along the bottom edge form a hill line.
Scatters thousands of tiny, faintly white 2×2 dots at pseudo-random positions. A simple formula (a seeded number generator) is used instead of Math.random(), so the picture is identical every time you run it. Fine texture matters: smooth images compress very well, noisy ones do not, just like real photos.
Hands the finished canvas to the caller.
A stand-in for canvas.toBlob() that returns the Blob immediately, so the example can print sizes. toDataURL(type, quality) runs the browser’s real image encoder and returns the file as a data URL. The quality argument (0 to 1) only matters for image/jpeg and image/webp; PNG ignores it.
A data URL looks like data:image/jpeg;base64,AAAA… Line 1 reads the type that was actually used (important: if the browser cannot encode the requested type, it silently returns PNG). Then atob() decodes the base64 part into raw bytes, and Uint8Array.from turns them into a byte array.
Wraps the bytes in a real Blob. blob.size is the file size in bytes and blob.type is the format, which is exactly what the callback of toBlob() would give you.
Creates an img element (class demo-export-image) that will display the exported file.
URL.createObjectURL(blob) makes a temporary address that points to the Blob in memory, and assigning it to src displays the picture. Once the image has loaded, onload calls URL.revokeObjectURL() to release that memory, which is the clean-up step the lesson recommends.
Shows the image below the text output with a caption that includes the file size and the real format.
showBars(title, items) draws a simple horizontal bar chart. Each item has a label and a size in bytes. max is the largest size; it is used so that the longest bar fills the full width and the others are drawn in proportion.
For every item it builds a row with the label, a grey track, a coloured bar whose width is (size / max) x 100 percent, and the size in KB. Bars make it easy to compare sizes at a glance, which numbers alone do not.
Displays the finished chart below the text output.
Resizing Often Saves More Than Lowering Quality
Drawing the image onto a smaller canvas before exporting reduces the pixel count itself, which is often a bigger win than only lowering quality.
What this code does: Starts with an 800×600 picture and compares three exports: the original at quality 0.8, the original at a lower quality of 0.4, and a version drawn onto a 400×300 canvas (a quarter of the pixels) at quality 0.8. The bar chart lets you see which change saves most for this picture. The resized image is displayed too. Which option wins depends on the picture, so compare the bars yourself.
const original = makePhoto(800, 600);
// Draw the big image onto a smaller canvas
const resized = document.createElement("canvas");
resized.width = 400;
resized.height = 300;
resized.getContext("2d").drawImage(original, 0, 0, 400, 300);
const fullBlob = canvasToBlob(original, "image/jpeg", 0.8);
const lowQualityBlob = canvasToBlob(original, "image/jpeg", 0.4);
const resizedBlob = canvasToBlob(resized, "image/jpeg", 0.8);
console.log("Original 800x600, quality 0.8:", (fullBlob.size / 1024).toFixed(1), "KB");
console.log("Original 800x600, quality 0.4:", (lowQualityBlob.size / 1024).toFixed(1), "KB");
console.log("Resized 400x300, quality 0.8:", (resizedBlob.size / 1024).toFixed(1), "KB");
showBars("Which change saves more?", [
{ label: "Original 0.8", size: fullBlob.size },
{ label: "Lower quality", size: lowQualityBlob.size },
{ label: "Resized", size: resizedBlob.size }
]);
showBlob("Resized image (400x300)", resizedBlob);
// ===== 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 makePhoto(width, height) {
const c = document.createElement("canvas");
c.width = width;
c.height = height;
const g = c.getContext("2d");
const sky = g.createLinearGradient(0, 0, 0, height);
sky.addColorStop(0, "#1e3a8a");
sky.addColorStop(0.6, "#f59e0b");
sky.addColorStop(1, "#7c2d12");
g.fillStyle = sky;
g.fillRect(0, 0, width, height);
g.fillStyle = "#fde68a";
g.beginPath();
g.arc(width * 0.7, height * 0.35, height * 0.12, 0, Math.PI * 2);
g.fill();
g.fillStyle = "#14532d";
for (let i = 0; i < 6; i++) {
g.beginPath();
g.arc(width * (i / 5), height * 0.9, height * 0.22, 0, Math.PI * 2);
g.fill();
}
let seed = 7;
for (let i = 0; i < (width * height) / 40; i++) {
seed = (seed * 16807) % 2147483647;
const x = seed % width;
seed = (seed * 16807) % 2147483647;
const y = seed % height;
g.fillStyle = "rgba(255, 255, 255, " + ((seed % 100) / 600) + ")";
g.fillRect(x, y, 2, 2);
}
return c;
}
function canvasToBlob(canvas, type, quality) {
const dataUrl = canvas.toDataURL(type, quality);
const mime = dataUrl.slice(5, dataUrl.indexOf(";"));
const binary = atob(dataUrl.split(",")[1]);
const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
return new Blob([bytes], { type: mime });
}
function showBlob(label, blob) {
const img = document.createElement("img");
img.className = "demo-export-image";
img.style.cssText = "max-width:100%;border-radius:6px;display:block;";
img.onload = () => URL.revokeObjectURL(img.src);
img.src = URL.createObjectURL(blob);
showPreview(label + " (" + (blob.size / 1024).toFixed(1) + " KB, " + blob.type + ")", img);
}
function showBars(title, items) {
const wrap = document.createElement("div");
wrap.className = "demo-bars";
wrap.style.cssText = "font:13px sans-serif;color:#0f172a;max-width:420px;";
const max = Math.max(...items.map((item) => item.size));
items.forEach((item) => {
const row = document.createElement("div");
row.className = "demo-bar-row";
row.style.cssText = "display:flex;align-items:center;gap:8px;margin:4px 0;";
row.innerHTML = "<span style='display:inline-block;width:95px'>" + item.label + "</span>"
+ "<div style='flex:1;background:#e2e8f0;border-radius:4px'>"
+ "<div style='height:16px;border-radius:4px;background:#4f46e5;width:" + (item.size / max * 100) + "%'></div></div>"
+ "<span style='display:inline-block;width:75px;text-align:right'>" + (item.size / 1024).toFixed(1) + " KB</span>";
wrap.appendChild(row);
});
showPreview(title, wrap);
}An 800×600 picture: 480,000 pixels.
A new, smaller canvas of 400×300 is created. drawImage(source, 0, 0, 400, 300) draws the big canvas scaled down into it, so the resized canvas has only a quarter of the pixels. This is exactly how browser-based resize tools work.
The baseline (original, 0.8), the ‘lower the quality’ option (original, 0.4) and the ‘resize’ option (smaller canvas, 0.8). Changing only one thing at a time keeps the comparison fair.
Real byte counts for the three options. Compare the second and third line to see which saves more for this image.
The three bars show how much each change reduces the file, relative to the largest.
Displays the 400×300 result. Because it is smaller, it also loads faster and uses less memory in the browser, a benefit that quality alone does not give.
Everything below this comment is support code that draws the sample picture, exports it and shows the results. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (an image, a bar chart) 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.
makePhoto(width, height) draws a photo-like scene on a new canvas so there is something real to compress. Because it uses fractions of width and height, the same scene can be made at any size.
A vertical gradient (top to bottom) from deep blue through orange to brown fills the canvas.
A pale yellow circle placed at 70% of the width and 35% of the height.
Six overlapping dark green circles along the bottom edge form a hill line.
Scatters thousands of tiny, faintly white 2×2 dots at pseudo-random positions. A simple formula (a seeded number generator) is used instead of Math.random(), so the picture is identical every time you run it. Fine texture matters: smooth images compress very well, noisy ones do not, just like real photos.
Hands the finished canvas to the caller.
A stand-in for canvas.toBlob() that returns the Blob immediately, so the example can print sizes. toDataURL(type, quality) runs the browser’s real image encoder and returns the file as a data URL. The quality argument (0 to 1) only matters for image/jpeg and image/webp; PNG ignores it.
A data URL looks like data:image/jpeg;base64,AAAA… Line 1 reads the type that was actually used (important: if the browser cannot encode the requested type, it silently returns PNG). Then atob() decodes the base64 part into raw bytes, and Uint8Array.from turns them into a byte array.
Wraps the bytes in a real Blob. blob.size is the file size in bytes and blob.type is the format, which is exactly what the callback of toBlob() would give you.
Creates an img element (class demo-export-image) that will display the exported file.
URL.createObjectURL(blob) makes a temporary address that points to the Blob in memory, and assigning it to src displays the picture. Once the image has loaded, onload calls URL.revokeObjectURL() to release that memory, which is the clean-up step the lesson recommends.
Shows the image below the text output with a caption that includes the file size and the real format.
showBars(title, items) draws a simple horizontal bar chart. Each item has a label and a size in bytes. max is the largest size; it is used so that the longest bar fills the full width and the others are drawn in proportion.
For every item it builds a row with the label, a grey track, a coloured bar whose width is (size / max) x 100 percent, and the size in KB. Bars make it easy to compare sizes at a glance, which numbers alone do not.
Displays the finished chart below the text output.
Common Mistake: Treating toBlob() as Synchronous
toBlob() is asynchronous. Reading a variable immediately after calling it (before the callback runs) gives undefined.
What this code does: Shows the classic mistake and the fix. The helper mockToBlob() behaves like the real toBlob(): it returns immediately and calls your callback later. The wrong version reads the result on the very next line and gets undefined. The correct version uses the Blob inside the callback. At the end, runPendingCallbacks() plays the part of the browser finishing the work, and the result finally arrives.
const canvas = makePhoto(400, 300);
let result;
// Wrong: the callback has not run yet when the next line executes
mockToBlob(canvas, (blob) => { result = blob; }, "image/jpeg", 0.8);
console.log("Immediately after calling toBlob:", result);
// Correct: use the Blob inside the callback
mockToBlob(canvas, (blob) => {
console.log("Inside the callback: size", (blob.size / 1024).toFixed(1), "KB");
showBlob("Blob received in the callback", blob);
}, "image/jpeg", 0.8);
// A real browser runs the callbacks after your code finishes; we do it here
console.log("--- the browser finishes encoding ---");
runPendingCallbacks();
console.log("Later, result holds a Blob of type:", result.type);
// ===== 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 makePhoto(width, height) {
const c = document.createElement("canvas");
c.width = width;
c.height = height;
const g = c.getContext("2d");
const sky = g.createLinearGradient(0, 0, 0, height);
sky.addColorStop(0, "#1e3a8a");
sky.addColorStop(0.6, "#f59e0b");
sky.addColorStop(1, "#7c2d12");
g.fillStyle = sky;
g.fillRect(0, 0, width, height);
g.fillStyle = "#fde68a";
g.beginPath();
g.arc(width * 0.7, height * 0.35, height * 0.12, 0, Math.PI * 2);
g.fill();
g.fillStyle = "#14532d";
for (let i = 0; i < 6; i++) {
g.beginPath();
g.arc(width * (i / 5), height * 0.9, height * 0.22, 0, Math.PI * 2);
g.fill();
}
let seed = 7;
for (let i = 0; i < (width * height) / 40; i++) {
seed = (seed * 16807) % 2147483647;
const x = seed % width;
seed = (seed * 16807) % 2147483647;
const y = seed % height;
g.fillStyle = "rgba(255, 255, 255, " + ((seed % 100) / 600) + ")";
g.fillRect(x, y, 2, 2);
}
return c;
}
function canvasToBlob(canvas, type, quality) {
const dataUrl = canvas.toDataURL(type, quality);
const mime = dataUrl.slice(5, dataUrl.indexOf(";"));
const binary = atob(dataUrl.split(",")[1]);
const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
return new Blob([bytes], { type: mime });
}
function showBlob(label, blob) {
const img = document.createElement("img");
img.className = "demo-export-image";
img.style.cssText = "max-width:100%;border-radius:6px;display:block;";
img.onload = () => URL.revokeObjectURL(img.src);
img.src = URL.createObjectURL(blob);
showPreview(label + " (" + (blob.size / 1024).toFixed(1) + " KB, " + blob.type + ")", img);
}
const pendingJobs = [];
function mockToBlob(canvas, callback, type, quality) {
pendingJobs.push(() => callback(canvasToBlob(canvas, type, quality)));
}
function runPendingCallbacks() {
pendingJobs.splice(0).forEach((job) => job());
}A sample picture and an empty variable, result, which the wrong version will try to fill from inside a callback.
The callback assigns result, but it has not run yet when the next line executes, because toBlob returns before the work is done. The log prints undefined. Any code that needs the Blob will fail or use an empty value.
Put everything that needs the Blob inside the callback, so it runs only when the Blob exists. Here the callback prints the size and shows the picture. Nothing happens yet, because the work is still waiting in the queue.
In a real page the browser calls both callbacks after your script ends. runPendingCallbacks() does that on purpose here: the correct callback prints its size and shows the picture, and result finally holds a Blob. The last line proves it: result.type is image/jpeg. Notice that the text output order explains the mistake: the undefined line comes first, the result later.
Everything below this comment is support code that draws the sample picture, exports it and shows the results. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (an image, a bar chart) 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.
makePhoto(width, height) draws a photo-like scene on a new canvas so there is something real to compress. Because it uses fractions of width and height, the same scene can be made at any size.
A vertical gradient (top to bottom) from deep blue through orange to brown fills the canvas.
A pale yellow circle placed at 70% of the width and 35% of the height.
Six overlapping dark green circles along the bottom edge form a hill line.
Scatters thousands of tiny, faintly white 2×2 dots at pseudo-random positions. A simple formula (a seeded number generator) is used instead of Math.random(), so the picture is identical every time you run it. Fine texture matters: smooth images compress very well, noisy ones do not, just like real photos.
Hands the finished canvas to the caller.
A stand-in for canvas.toBlob() that returns the Blob immediately, so the example can print sizes. toDataURL(type, quality) runs the browser’s real image encoder and returns the file as a data URL. The quality argument (0 to 1) only matters for image/jpeg and image/webp; PNG ignores it.
A data URL looks like data:image/jpeg;base64,AAAA… Line 1 reads the type that was actually used (important: if the browser cannot encode the requested type, it silently returns PNG). Then atob() decodes the base64 part into raw bytes, and Uint8Array.from turns them into a byte array.
Wraps the bytes in a real Blob. blob.size is the file size in bytes and blob.type is the format, which is exactly what the callback of toBlob() would give you.
Creates an img element (class demo-export-image) that will display the exported file.
URL.createObjectURL(blob) makes a temporary address that points to the Blob in memory, and assigning it to src displays the picture. Once the image has loaded, onload calls URL.revokeObjectURL() to release that memory, which is the clean-up step the lesson recommends.
Shows the image below the text output with a caption that includes the file size and the real format.
An array that holds callbacks which have been requested but not yet run, just like the browser’s queue of finished background tasks.
Behaves like the real toBlob(): it returns immediately and does not call your callback yet. It only stores a job in the waiting list; the job will encode the canvas and call your function when it is run.
Runs and empties the waiting list. In a real page the browser does this by itself, after your current code has finished. Here the example calls it on purpose, so you can see the moment the result becomes available.
PNG vs JPEG vs WebP
| Format | Compression | Transparency | Best For |
|---|---|---|---|
| PNG | Lossless | Yes | Icons, logos, screenshots, text |
| JPEG | Lossy (quality 0–1) | No | Photographs |
| WebP | Lossy or lossless | Yes | Most images, usually the smallest |
Common Mistakes
- Passing a quality value to PNG and expecting the file to shrink
- Re-compressing an already-lossy JPEG repeatedly
- Assuming every browser supports WebP without checking
blob.type - Forgetting to call
URL.revokeObjectURL() - Only lowering quality when resizing would save far more space
- Using the result of
toBlob()outside its callback
Best Practices
- Use JPEG or WebP for photographs; PNG for graphics that need transparency
- Resize large images to their display size before compressing
- Test quality values in the 0.6–0.85 range
- Always treat
toBlob()as asynchronous (toDataURL()is synchronous but produces larger text) - Revoke object URLs when they are no longer needed
Quick Summary
- Draw to a canvas, then export with
toBlob()ortoDataURL() - PNG is lossless and ignores quality; JPEG and WebP use a 0–1 quality value
- WebP is generally the smallest modern option
- Resizing dimensions usually saves more space than lowering quality alone
toBlob()is always asynchronous, so use the callback
Try It Yourself
What this code does: Combines raw size calculation, JPEG export and a savings percentage on a larger 1200×800 picture. Change the three settings at the top (width, height and quality) and run it again to see how the file size and the savings react. The output shows the numbers, a bar chart (raw size against JPEG size) and the exported picture.
const width = 1200;
const height = 800;
const quality = 0.75;
const canvas = makePhoto(width, height);
const rawSize = canvas.width * canvas.height * 4;
console.log("Original size:", (rawSize / 1024 / 1024).toFixed(2), "MB");
const blob = canvasToBlob(canvas, "image/jpeg", quality);
const saved = (100 - (blob.size / rawSize) * 100).toFixed(1);
console.log("JPEG (" + quality + "):", (blob.size / 1024).toFixed(1), "KB, saved", saved + "%");
showBars("Raw vs JPEG", [
{ label: "Raw pixels", size: rawSize },
{ label: "JPEG " + quality, size: blob.size }
]);
showBlob("Result (" + width + "x" + height + ")", blob);
// ===== 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 makePhoto(width, height) {
const c = document.createElement("canvas");
c.width = width;
c.height = height;
const g = c.getContext("2d");
const sky = g.createLinearGradient(0, 0, 0, height);
sky.addColorStop(0, "#1e3a8a");
sky.addColorStop(0.6, "#f59e0b");
sky.addColorStop(1, "#7c2d12");
g.fillStyle = sky;
g.fillRect(0, 0, width, height);
g.fillStyle = "#fde68a";
g.beginPath();
g.arc(width * 0.7, height * 0.35, height * 0.12, 0, Math.PI * 2);
g.fill();
g.fillStyle = "#14532d";
for (let i = 0; i < 6; i++) {
g.beginPath();
g.arc(width * (i / 5), height * 0.9, height * 0.22, 0, Math.PI * 2);
g.fill();
}
let seed = 7;
for (let i = 0; i < (width * height) / 40; i++) {
seed = (seed * 16807) % 2147483647;
const x = seed % width;
seed = (seed * 16807) % 2147483647;
const y = seed % height;
g.fillStyle = "rgba(255, 255, 255, " + ((seed % 100) / 600) + ")";
g.fillRect(x, y, 2, 2);
}
return c;
}
function canvasToBlob(canvas, type, quality) {
const dataUrl = canvas.toDataURL(type, quality);
const mime = dataUrl.slice(5, dataUrl.indexOf(";"));
const binary = atob(dataUrl.split(",")[1]);
const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
return new Blob([bytes], { type: mime });
}
function showBlob(label, blob) {
const img = document.createElement("img");
img.className = "demo-export-image";
img.style.cssText = "max-width:100%;border-radius:6px;display:block;";
img.onload = () => URL.revokeObjectURL(img.src);
img.src = URL.createObjectURL(blob);
showPreview(label + " (" + (blob.size / 1024).toFixed(1) + " KB, " + blob.type + ")", img);
}
function showBars(title, items) {
const wrap = document.createElement("div");
wrap.className = "demo-bars";
wrap.style.cssText = "font:13px sans-serif;color:#0f172a;max-width:420px;";
const max = Math.max(...items.map((item) => item.size));
items.forEach((item) => {
const row = document.createElement("div");
row.className = "demo-bar-row";
row.style.cssText = "display:flex;align-items:center;gap:8px;margin:4px 0;";
row.innerHTML = "<span style='display:inline-block;width:95px'>" + item.label + "</span>"
+ "<div style='flex:1;background:#e2e8f0;border-radius:4px'>"
+ "<div style='height:16px;border-radius:4px;background:#4f46e5;width:" + (item.size / max * 100) + "%'></div></div>"
+ "<span style='display:inline-block;width:75px;text-align:right'>" + (item.size / 1024).toFixed(1) + " KB</span>";
wrap.appendChild(row);
});
showPreview(title, wrap);
}Three values you can change: the picture size and the JPEG quality. Try 600 x 400 or a quality of 0.3 and run again.
Creates the picture and calculates its uncompressed size: width x height x 4 bytes. Dividing by 1024 twice converts bytes to MB (1200 x 800 x 4 = 3,840,000 bytes, about 3.66 MB).
Exports a JPEG with your quality, calculates the percentage saved the same way as in the earlier example, and prints the size and the saving.
A two-bar chart of raw size and JPEG size, so the effect of your settings is visible.
Displays the exported picture. Lower the quality until you can see artefacts, then raise it again to find a good balance.
Everything below this comment is support code that draws the sample picture, exports it and shows the results. The lesson itself is the code above.
Not part of the lesson; it only makes results visible. showPreview(label, node) puts any DOM element (an image, a bar chart) 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.
makePhoto(width, height) draws a photo-like scene on a new canvas so there is something real to compress. Because it uses fractions of width and height, the same scene can be made at any size.
A vertical gradient (top to bottom) from deep blue through orange to brown fills the canvas.
A pale yellow circle placed at 70% of the width and 35% of the height.
Six overlapping dark green circles along the bottom edge form a hill line.
Scatters thousands of tiny, faintly white 2×2 dots at pseudo-random positions. A simple formula (a seeded number generator) is used instead of Math.random(), so the picture is identical every time you run it. Fine texture matters: smooth images compress very well, noisy ones do not, just like real photos.
Hands the finished canvas to the caller.
A stand-in for canvas.toBlob() that returns the Blob immediately, so the example can print sizes. toDataURL(type, quality) runs the browser’s real image encoder and returns the file as a data URL. The quality argument (0 to 1) only matters for image/jpeg and image/webp; PNG ignores it.
A data URL looks like data:image/jpeg;base64,AAAA… Line 1 reads the type that was actually used (important: if the browser cannot encode the requested type, it silently returns PNG). Then atob() decodes the base64 part into raw bytes, and Uint8Array.from turns them into a byte array.
Wraps the bytes in a real Blob. blob.size is the file size in bytes and blob.type is the format, which is exactly what the callback of toBlob() would give you.
Creates an img element (class demo-export-image) that will display the exported file.
URL.createObjectURL(blob) makes a temporary address that points to the Blob in memory, and assigning it to src displays the picture. Once the image has loaded, onload calls URL.revokeObjectURL() to release that memory, which is the clean-up step the lesson recommends.
Shows the image below the text output with a caption that includes the file size and the real format.
showBars(title, items) draws a simple horizontal bar chart. Each item has a label and a size in bytes. max is the largest size; it is used so that the longest bar fills the full width and the others are drawn in proportion.
For every item it builds a row with the label, a grey track, a coloured bar whose width is (size / max) x 100 percent, and the size in KB. Bars make it easy to compare sizes at a glance, which numbers alone do not.
Displays the finished chart below the text output.
Tip: Resize the canvas before you compress it, pick JPEG or WebP for photographs and PNG for graphics that need transparency, and always treat the export as asynchronous.
🧪 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