Ce este un element canvas în HTML5?

Elementul <canvas> în HTML5 este un container pentru desenarea graficii cu ajutorul scripturilor (de obicei JavaScript). Permite crearea de vizualizări dinamice, jocuri și animații direct în browser, fără plugin-uri.

Aspecte cheie:

• Desen pixel cu pixel: Funcționează la nivel de pixeli, oferind control total asupra fiecărui element al imaginii.
• Utilizarea API-ului: Interacțiunea cu <canvas> se face prin API-ul contextului de randare, cel mai comun fiind 2d pentru grafica bidimensională. Există și webgl pentru 3D.
• Tavă goală: Elementul <canvas> în sine este doar un container. Toate desenările se fac programatic.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

// Obținem elementul canvas
const canvas = document.getElementById('myCanvas');

// Obținem contextul 2D de desen
const ctx = canvas.getContext('2d');

// Desenăm un dreptunghi
ctx.fillStyle = "#FF0000"; // Culoarea de umplere
ctx.fillRect(0, 0, 150, 75); // x, y, lățime, înălțime

Capacitățile includ:

• Forme primitive (linii, dreptunghiuri, cercuri, arce)
• Text
• Imagini
• Gradiente și modele
• Drumuri (path) pentru figuri complexe