Cum să desenezi cu Canvas API în HTML — ghid începător

In this tutorial, you'll learn about Cum să desenezi cu Canvas API în HTML. We cover key concepts, practical examples, and best practices.

Canvas API permite desenarea de grafică programatică în browser — de la forme simple și animații până la jocuri 2D și vizualizări de date.

The Problem

Mulți începători nu înțeleg cum funcționează sistemul de coordonate al canvas-ului, cum să deseneze forme de bază sau cum să gestioneze contextul de desenare.

The Wrong Way

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  canvas.fillStyle = 'red';
  canvas.fillRect(50, 50, 100, 100);
</script>

Probleme: Metodele de desenare (fillStyle, fillRect) nu sunt pe canvas, ci pe context (obiectul returnat de getContext).

The Right Way

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // Desenează un dreptunghi roșu
  ctx.fillStyle = 'red';
  ctx.fillRect(50, 50, 100, 100);

  // Desenează un arc (cerc)
  ctx.beginPath();
  ctx.arc(200, 150, 50, 0, Math.PI * 2);
  ctx.fillStyle = 'blue';
  ctx.fill();
</script>

Step-by-Step Fix

1. Obține contextul de desenare

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

Fără getContext('2d'), nu poți desena nimic.

2. Desenează dreptunghiuri

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);   // umplut
ctx.strokeRect(180, 10, 150, 100); // contur
ctx.clearRect(20, 20, 50, 50);     // șterge

3. Desenează arcuri și cercuri

ctx.beginPath();
ctx.arc(x, y, raza, startAngle, endAngle);
ctx.fill();    // umple
ctx.stroke();  // contur

Unghiurile sunt în radiani. Pentru un cerc complet: 0 la Math.PI * 2.

4. Adaugă stil și text

ctx.fillStyle = '#FF5733';
ctx.font = '20px Arial';
ctx.fillText('Salut, Canvas!', 50, 200);

Prevention Tips

• Întotdeauna obține contextul cu getContext('2d')
• Coordonatele încep din colțul stânga-sus (0, 0)
• Folosește beginPath() înainte de forme noi pentru a nu le suprapune
• Apelează fill() sau stroke() după definirea căii

Common Mistakes

1. Metode pe canvas în loc de context — canvas.fillRect() nu există, trebuie ctx.fillRect()
2. Fără beginPath() — arcurile anterioare se redesenează peste cele noi
3. Unghiuri în grade în loc de radiani — arc() folosește radiani; convertește cu grade * Math.PI / 180
4. Dimensiuni CSS vs atribut — width și height pe canvas definesc rezoluția, nu CSS-ul
5. Fără fallback — canvas-ul nu afișează nimic fără JavaScript; pune text între tag-uri

FAQ

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu HTML pentru productivitate și securitate sporită.