Šta je element canvas u HTML5?

Element <canvas> u HTML5 je kontejner za crtanje grafike pomoću skripti (obično JavaScript). Omogućava kreiranje dinamičkih vizualizacija, igara i animacija direktno u pretraživaču bez dodataka.

Ključni aspekti:

• Crtanje piksel po piksel: Funkcioniše na nivou piksela, pružajući potpunu kontrolu nad svakim elementom slike.
• Korišćenje API-ja: Interakcija sa <canvas> se vrši putem API-ja konteksta renderovanja, najčešće 2d za dvodimenzionalnu grafiku. Postoji i webgl za 3D.
• Prazno platno: Sam element <canvas> je samo kontejner. Sve crtanje se vrši programatski.

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

// Dobijamo element canvas
const canvas = document.getElementById('myCanvas');

// Dobijamo 2D kontekst za crtanje
const ctx = canvas.getContext('2d');

// Crtamo pravougaonik
ctx.fillStyle = "#FF0000"; // Boja popune
ctx.fillRect(0, 0, 150, 75); // x, y, širina, visina

Mogućnosti uključuju:

• Primitivne oblike (linije, pravougaonici, krugovi, lukovi)
• Tekst
• Slike
• Gradiente i uzorke
• Puteve (path) za složenije figure