HTML Academy · Lezione

Configurare canvas e il contesto 2D

Creare un elemento canvas e ottenere il contesto di rendering 2D

Configurare canvas e il contesto 2D è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

L'elemento canvas

L'elemento <canvas> è una superficie bitmap disegnabile nel browser:

<canvas id="myCanvas" width="800" height="400">
  <!-- Fallback for browsers without canvas support -->
  <p>Your browser does not support HTML5 Canvas.</p>
</canvas>

Attributi di larghezza e altezza

Imposti sempre le dimensioni di canvas tramite attributi HTML, non tramite CSS:

<!-- CORRECT: set intrinsic size via attributes -->
<canvas width="800" height="400"></canvas>

<!-- WRONG: CSS changes display size but not canvas resolution -->
<canvas style="width: 800px; height: 400px;"></canvas>
<!-- This stretches a default 300x150 canvas to 800x400
     Result: blurry graphics -->

Ottenere il contesto 2D

Acquisisca il contesto di rendering 2D per disegnare:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// ctx is a CanvasRenderingContext2D object
// All drawing operations are methods on ctx

// Check browser support:
if (!canvas.getContext) {
  console.error('Canvas not supported');
}

Sistema di coordinate

Il sistema di coordinate di canvas parte dall'angolo in alto a sinistra:

// (0, 0) = top-left corner
// (width, 0) = top-right
// (0, height) = bottom-left
// (width, height) = bottom-right

// For a 800x400 canvas:
// x increases left → right (0 to 800)
// y increases top → bottom (0 to 400)
//
// Example: draw at center:
ctx.fillRect(400, 200, 10, 10);  // centered dot

Stato di canvas

Canvas dispone di uno stato di disegno che può essere salvato e ripristinato:

ctx.save();       // push current state onto a stack

// Change state:
ctx.fillStyle = 'red';
ctx.globalAlpha = 0.5;

// Draw with modified state...
ctx.fillRect(100, 100, 200, 200);

ctx.restore();    // pop state: back to pre-save settings

Cancellare canvas

Cancelli l'intero canvas prima di eseguire nuovamente il disegno (per le animazioni):

// Clear entire canvas:
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Or with a background color:
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

fillStyle e strokeStyle

Imposti i colori per le operazioni di riempimento e tracciamento:

ctx.fillStyle = 'blue';                    // CSS color name
ctx.fillStyle = '#ff6600';                 // hex color
ctx.fillStyle = 'rgb(255, 100, 0)';       // rgb
ctx.fillStyle = 'rgba(255, 100, 0, 0.5)'; // rgba with alpha
ctx.fillStyle = gradient;                  // gradient object
ctx.fillStyle = pattern;                   // pattern object

ctx.strokeStyle = '#333333';               // border color

lineWidth e altre proprietà di stile

Proprietà dello stile delle linee e del tracciamento:

ctx.lineWidth = 4;           // stroke width in pixels
ctx.lineCap = 'round';       // butt | round | square
ctx.lineJoin = 'round';      // miter | round | bevel
ctx.setLineDash([5, 3]);     // dashed line: 5px dash, 3px gap
ctx.globalAlpha = 0.8;       // transparency for all drawing
ctx.globalCompositeOperation = 'multiply'; // blend modes

Canvas HiDPI reattivo

Risolva il problema del canvas sfocato sui display Retina/HiDPI:

function setupHiDPI(canvas, width, height) {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);  // scale all drawing
  return ctx;
}

Canvas vs SVG

Quando scegliere canvas invece di SVG:

Canvas — bitmap, pixel per pixel, ideale per giochi, visualizzazioni di grandi quantità di dati ed elaborazione delle immagini
SVG — vettoriale, ridimensionabile, ideale per loghi, icone, grafici con elementi interattivi e accessibilità

Accessibilità di Canvas

Canvas non offre accessibilità integrata: deve aggiungerla manualmente:

<canvas
  id="chart"
  width="800"
  height="400"
  aria-label="Bar chart showing Q1-Q4 revenue growth"
  role="img"
>
  <!-- Fallback for non-canvas browsers and screen readers -->
  <table><!-- accessible data table --></table>
</canvas>

Verifica rapida

Qual è il modo corretto per ottenere un contesto di disegno canvas?

Riepilogo: configurazione di Canvas

Elementi essenziali della configurazione di Canvas:

Imposti width/height tramite attributi HTML, non tramite CSS
canvas.getContext('2d') — ottiene il contesto di disegno
Origine in alto a sinistra (0,0); x→destra, y→giù
ctx.save() / ctx.restore() — gestione dello stato basata su uno stack
Esegua il ridimensionamento in base a devicePixelRatio per un rendering nitido sui display Retina

Domande Frequenti

La lezione «Configurare canvas e il contesto 2D» è gratuita?

Sì — il testo completo di «Configurare canvas e il contesto 2D» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Configurare canvas e il contesto 2D»?

Creare un elemento canvas e ottenere il contesto di rendering 2D Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Configurare canvas e il contesto 2D»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a HTML Academy