canvas.getContext / toDataURL / toBlob în JavaScript

const ctx = canvas.getContext("2d");
canvas.toDataURL("image/png")
canvas.toBlob(callback, "image/jpeg", 0.9)

Ce face canvas.getContext / toDataURL / toBlob

getContext("2d") returnează obiectul cu care desenezi: dreptunghiuri (fillRect), linii, text (fillText), imagini (drawImage). Pentru grafică 3D există contextele "webgl2" și "webgpu".

toDataURL(tip, calitate) returnează desenul ca adresă data: în Base64, iar toBlob(callback, tip, calitate) ca Blob, mai eficient pentru imagini mari (de exemplu pentru încărcare pe server).

Parametri

Parametru	Descriere
tipContext	Pentru getContext: "2d", "webgl2" etc.
tip, calitate	Pentru export: "image/png", "image/jpeg", "image/webp" și calitatea 0–1.

Ce returnează

getContext: contextul. toDataURL: text. toBlob: nimic, blob-ul vine în funcția dată.

Exemple

Exemplul 1: O insignă desenată și exportată

const canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 80;
const ctx = canvas.getContext("2d");

ctx.fillStyle = "#0a7d3b";
ctx.fillRect(0, 0, 200, 80);
ctx.fillStyle = "white";
ctx.font = "24px sans-serif";
ctx.fillText("Reducere 20%", 20, 50);

console.log(canvas.toDataURL("image/png").slice(0, 30));
canvas.toBlob((blob) => console.log(blob.type, blob.size > 0), "image/jpeg", 0.9);

Rezultat în browser

data:image/png;base64,iVBORw0K
image/jpeg true

Greșeli frecvente

• Desenezi pe canvas o imagine de pe alt domeniu și apoi apelezi toDataURL. Primești SecurityError; serverul imaginii trebuie să permită CORS, iar imaginea trebuie încărcată cu crossOrigin = "anonymous".

Comenzi înrudite

• Blob / File: Un bloc de date imuabil, cu tip MIME (Blob), sau un fișier cu nume și dată (File).
• URL.createObjectURL / revokeObjectURL: Creează o adresă temporară (blob:…) pentru un fișier sau Blob din memorie, ca să-l afișezi sau descarci.
• requestAnimationFrame: Rulează o funcție chiar înainte de următoarea redesenare a ecranului; baza animațiilor fluide.