în HTML

Ghid complet pentru elementul grafic <canvas>: randare 2D și WebGL prin JavaScript, desenare de forme, grafice interactive și manipulare de pixeli.

Sintaxă tag

<canvas id="grafic" width="600" height="400"></canvas>

Tagul <canvas> este un container grafic raster (pe bază de pixeli) pe care codul JavaScript poate desena în timp real. Este utilizat intensiv pentru crearea de grafice și diagrame dinamice (cu biblioteci precum Chart.js), motoare de jocuri 2D și 3D în browser (Phaser, Three.js), animații interactive și editoare de imagini direct pe client.

Desenarea unui dreptunghi și a unui text cu JavaScript pe <canvas>

<!-- 1. Definirea suprafeței canvas în HTML cu dimensiuni explicite în pixeli -->
<canvas id="panza-grafica" width="400" height="200" style="border: 1px solid #cbd5e1; border-radius: 8px;">
    Browserul dumneavoastră nu suportă elementul canvas HTML5.
</canvas>

<!-- 2. Desenarea efectivă folosind Contextul 2D din JavaScript -->
<script>
    const canvas = document.getElementById("panza-grafica");
    const ctx = canvas.getContext("2d");

    // Desenăm un dreptunghi albastru
    ctx.fillStyle = "#3858e9";
    ctx.fillRect(30, 30, 150, 90);

    // Adăugăm un text stilizat
    ctx.font = "bold 18px sans-serif";
    ctx.fillStyle = "#0f172a";
    ctx.fillText("Randare cu Canvas 2D", 30, 160);
</script>

Capcană Frecventă: Atributele width/height vs. Stilurile CSS

Elementul <canvas> are o lățime implicită de 300px și o înălțime de 150px. Trebuie să setezi dimensiunile folosind atributele HTML width și height (rezoluția internă a pixelilor), și nu doar prin CSS. Dacă redimensionezi canvasul doar prin reguli CSS (width: 100%), imaginea va fi deformată sau pixelată, deoarece browserul va scala desenul intern existent.