Canvas (elemento HTML)

Canvas è un elemento dello standard HTML5 che permette il rendering dinamico di immagini bitmap attraverso un linguaggio di scripting.

Storia

L'elemento fu inizialmente introdotto da Apple per uso all'interno del loro componente macOS WebKit, per migliorare applicazioni come Dashboard widgets ed il browser Safari. Più tardi venne adottato dai browser Gecko (Mozilla e Firefox) e Opera[1], e poi standardizzato dal WHATWG su nuove specifiche proposte per le tecnologie della prossima generazione.

Sintassi

Il Canvas consiste in una regione disegnabile, definita in codice HTML con gli attributi height and width. Il codice JavaScript può accedere all'area con un set completo di funzioni per il disegno, simili a quelle comuni ad altre API 2D, permettendo così la generazione dinamica di disegni. Alcuni usi possibili di Canvas includono i grafici, l'animazione e la composizione di immagini.

Il codice seguente crea un elemento Canvas in una pagina HTML: 

<canvas id="example" width="200" height="200">
Questo testo viene mostrato se il browser non supporta i canvas.
</canvas>

Utilizzando JavaScript è possibile aggiungere dei disegni; ad esempio, questo codice disegna un rettangolo rosso sullo schermo: 

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

L'API Canvas fornisce anche save()e restore(), per salvare e ripristinare tutti gli attributi del contesto canvas.

Canvas e CSS

Canvas può essere formattato mediante CSS: 

<!DOCTYPE html>
<html>
    <head>
    <title>Dimensione del canvas: 600 x 300, dimensione superficie disegnabile del canvas: 300 x 150</title>
    <style>
        body {
            background: #dddddd;
        }
        #canvas {
            margin: 20px;
            padding: 20px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            width: 600px;
            height: 300px;
        }
    </style>
    </head>
    <body>
        <canvas id="canvas">
        Canvas non supportato
        </canvas>
    </body>
</html>

Differenze tra SVG e Canvas

Lo stesso argomento in dettaglio: Scalable Vector Graphics.
Confronto tra il logo CSS3 creato con i CSS, con SVG e con HTML5 Canvas. A volte è possibile ottenere lo stesso risultato con tecniche diverse.
Confronto tra il logo CSS3 creato con i CSS, con SVG e con HTML5 Canvas. A volte è possibile ottenere lo stesso risultato con tecniche diverse.

SVG è un linguaggio per descrivere la grafica 2D in XML[2]. Canvas disegna grafica 2D, al volo (con JavaScript)[3].

SVG è basato su XML, il che significa che ogni elemento è disponibile all'interno di SVG DOM. Si possono allegare gestori di eventi JavaScript per un elemento.

In SVG, ogni forma disegnata viene "ricordata" come un oggetto. Se gli attributi di un oggetto SVG vengono modificati, il browser può automaticamente rieseguire il rendering della forma.

Il Canvas (anch'esso un elemento HTML5) viene renderizzato pixel per pixel. Il Canvas, una volta disegnata la grafica, viene "dimenticato" dal browser. Se la sua posizione deve essere cambiata, l'intera scena deve essere ridisegnata, inclusi gli oggetti che potrebbero essere stati coperti dalla grafica[4].

Il Canvas è adatto per applicazioni dinamiche come giochi e animazioni, per via del suo caricamento più veloce e indipendente dal DOM.

Le immagini create in SVG sono aggiunte al DOM e modificabili tramite JavaScript e CSS, anche con eventi presenti sugli altri elementi del documento[5].

Funzioni[6] SVG Canvas
Vettori SI NO
Rasterizzazione NO SI
Accesso DOM SI NO
Accessibilità SI Parziale
Testo SI SI
Gradienti e Patterns SI SI
CSS Animations SI NO
CSS Filters SI SI
SVG Filters SI SI
Inclusione video NO SI
Manipolazione Pixel NO SI
Accesso API in JS NO SI

Reazioni

Al momento della sua introduzione, l'elemento canvas non fu accolto unanimemente dalla comunità che si occupa di definire gli standard del web. Alcuni deplorarono la decisione di Apple di creare un nuovo elemento proprietario invece di supportare lo standard SVG, che non era ancora stato del tutto recepito dal web. Altri criticarono la logica che stava alla base dell'elemento: la sua essenza procedurale e la mancanza di una controparte dichiarativa consentiva al canvas di "disegnare", ma gli elementi disegnati non erano identificabili con qualcosa di simile ad un DOM. Altri ancora mostrarono preoccupazione non tanto per l'estensione proprietaria in sé, ma per la sintassi che è stata proposta per l'utilizzo della stessa. Costoro, per esempio, ritengono indesiderabile l'impossibilità di calare l'elemento all'interno di un namespace.[7]

Uno sviluppatore web, insoddisfatto dal livello del supporto del formato SVG in Safari, ha sviluppato un rasterizzatore in JavaScript, che ha chiamato SVG Tiny 1.2 to canvas, per dimostrare la mancata veridicità di affermazioni secondo le quali l'implementazione del canvas in Safari sarebbe stata molto più facile, rispetto ad una completa integrazione di SVG.[8]

WebGL

Lo stesso argomento in dettaglio: WebGL.
Esempio di Canvas usato in WebGL
Esempio di Canvas usato in WebGL

WebGL è una libreria grafica per il web (Web-based Graphics Library). Usa l'elemento Canvas HTML5 e vi si accede attraverso le interfacce Document Object Model.

Esempi

Esempio di Canvas. Effetto "flip" (volta pagina). Si può creare anche in PDF oppure convertire quest'ultimo in Canvas o viceversa.
Esempio di Canvas. Effetto "flipbook" online (volta pagina). Si può creare anche in PDF oppure convertire quest'ultimo in Canvas o viceversa[9].
  • Cubo di Rubik NxNxN - Simulatore 3D e Risolutore di Cubi di Rubik NxNxN implementato in JavaScript e Canvas.
  • (EN) Calc5 - Calcolatrice in JavaScript che può rappresentare in un grafico i risultati ottenuti.
  • (EN) Canvascape - Un gioco 3D creato usando Canvas.
  • (EN) Various demos - Diversi esempi di utilizzo di canvas (un grafico, uno strumento per tener d'occhio un server, e l'implementazione di un sistema di Lindenmayer).
  • (EN) Tucanos, su developer.mozilla.org.
  • (EN) Free drawing - Esempio di disegno libero.
  • (EN) Canvas Pong - Una reimplementazione di Pong che usa Canvas.
  • (EN) Canvas Painter - Applicazione dimostrativa di disegno, creata utilizzando dei widget.
  • (EN) PlotKit - Esempio di disegno di grafici attraverso l'utilizzo di un toolkit.
  • (EN) Unreal Soccer - Simulatore di calcio scritto usando Canvas.
  • (EN) LSys/JS - Interprete interattivo di un Sistema L che usa Canvas.
  • (EN) Ajax3d - Un motore 3D e un gioco scritti usando Canvas.
  • Smith Chart demo - Demo della carta di Smith che utilizza Canvas

Note

  1. ^ Opera 9.0 changelog, su opera.com. URL consultato il 30 aprile 2019 (archiviato dall'url originale il 26 agosto 2017).
  2. ^ - SVG: Scalable Vector Graphics | MDN, su developer.mozilla.org. URL consultato il 19 gennaio 2021.
  3. ^ Adding vector graphics to the Web - Learn web development | MDN, su developer.mozilla.org. URL consultato il 19 gennaio 2021.
  4. ^ HTML SVG, su w3schools.com. URL consultato il 19 gennaio 2021.
  5. ^ SVG o Canvas per il tuo HTML5?, su Wellnet, 9 maggio 2014. URL consultato il 19 gennaio 2021.
  6. ^ (EN) When to Use SVG vs. When to Use Canvas, su CSS-Tricks, 12 novembre 2019. URL consultato il 29 gennaio 2021.
  7. ^ (EN) Commenti di Ian Hickson su canvas e sulle altre estensioni all'HTML di Apple
  8. ^ (EN) Oggetto JavaScript canvaSVG che elabora documenti SVG come se fossero canvas Archiviato il 17 luglio 2007 in Internet Archive.
  9. ^ (EN) Jacob Sutton, How to make a HTML5 Flipbook for Free! [Easy Tutorial], su Medium, 9 aprile 2019. URL consultato il 29 gennaio 2021.

Voci correlate

Collegamenti esterni

  Portale Telematica: accedi alle voci di Wikipedia che parlano di reti, telecomunicazioni e protocolli di rete

Strategi Solo vs Squad di Free Fire: Cara Menang Mudah!