---
title: Canvas
slug: Web/API/Canvas_API
translation_of: Web/API/Canvas_API
original_slug: Web/HTML/Canvas
---
<p>Aggiunto con <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a>, <strong>HTML {{ HTMLElement("canvas") }}</strong> è un elemento che può essere usato per disegnare elementi grafici tramite script (di solito <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>). Per esempio, può essere usato per disegnare grafici, creare composizioni fotografiche, creare animazioni e perfino realizzare elvaborazioni video in tempo reale.</p>

<p>Le applicazioni Mozilla supportano <code>&lt;canvas&gt;</code> a partire da Gecko 1.8 (cioè <a href="/en-US/docs/Firefox_1.5_for_developers" title="en-US/docs/Firefox_1.5_for_developers">Firefox 1.5</a>). L'elemento è stato originariamente introdotto da Apple per OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard</a> e Safari. Internet Explorer supporta <code>&lt;canvas&gt;</code> dalla versione 9; per versioni precedenti di IE, una pagina può aggiungere il supporto per <code>&lt;canvas&gt;</code> includendo lo script del progetto <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a> di Google. Anche Google Chrome e Opera 9 supportano <code>&lt;canvas&gt;</code>.</p>

<p>L'elemento <code>&lt;canvas&gt;</code> è utilizzato anche da <a href="/en-US/docs/WebGL" title="en-US/docs/WebGL">WebGL</a> per la grafica 3D con accellerazione hardware nelle pagine web.</p>

<table class="topicpage-table">
 <tbody>
  <tr>
   <td>
    <h2 class="Documentation" id="Documentation" name="Documentation">Documentazione</h2>

    <dl>
     <dt><a class="external" href="https://html.spec.whatwg.org/multipage/canvas.html" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element">Specifiche</a></dt>
     <dd>L'elemento <code>&lt;canvas&gt;</code> è parte delle specifiche 1.0 della WhatWG per le applicazioni  Web, anche conosciute come HTML5.</dd>
     <dt><a href="/en-US/docs/Canvas_tutorial" title="en-US/docs/Canvas_tutorial">Esecitazione sui canvas</a></dt>
     <dd>Un'esercitazione completa che copre sia l'utilizzo base  che le caratteristiche avanzate di <code>&lt;canvas&gt;</code>.</dd>
     <dt><a href="/en-US/docs/Code_snippets/Canvas" title="en-US/docs/Code_snippets/Canvas">Frammenti di codice: Canvas</a></dt>
     <dd>Qualche frammento di codice per gli sviluppatori di estensioni che coinvolge <code>&lt;canvas&gt;</code>.</dd>
     <dt><a href="/en-US/docs/tag/Canvas_examples" title="/en-US/docs/tag/Canvas_examples">Esempi di canvas</a></dt>
     <dd>Alcune dimostraioni sui <code>&lt;canvas&gt;</code>.</dd>
     <dt><a href="/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas" title="en-US/docs/HTML/Canvas/Drawing DOM objects into a canvas">Disegnare oggetti DOM in un canvas</a></dt>
     <dd>Come disegnare contenuto DOM, come elementi HTML, in un canvas.</dd>
     <dt><a href="/en-US/docs/A_Basic_RayCaster" title="A Basic RayCaster">Un semplice raycaster</a></dt>
     <dd>Una demo di animazione ray-tracing utilizzando il canvas.</dd>
     <dt><a href="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces" title="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces">Interfacce dei Canvas nel DOM</a></dt>
     <dd>Interfacce dei Canvas nel DOM implementate in Gecko.</dd>
    </dl>

    <p><span class="alllinks"><a href="/en-US/docs/tag/HTML:Canvas" title="/en-US/docs/tag/HTML:Canvas">Vedi tutto...</a></span></p>
   </td>
   <td>
    <h2 class="Community" id="Comunità">Comunità</h2>

    <p>Guarda i forum di Mozilla...{{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}<br>
     <a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Canvas-Developers Yahoo Group</a></p>

    <h2 class="Resources" id="Resources" name="Resources">Risorse</h2>

    <ul>
     <li><a class="external" href="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html" title="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">Approfondimento HTML5 Canvas</a></li>
     <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Cheat Sheet per Canvas</a> (<a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png" title="HTML5_Canvas_Cheat_Sheet.png (1388×1027)">PNG</a> / <a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf" title="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf">PDF</a>)</li>
    </ul>

    <h2 class="Libraries" id="Libraries" name="Libraries">Librerie</h2>

    <ul>
     <li><a class="external" href="http://libcanvas.github.com/" title="http://libcanvas.github.com/">libCanvas</a> è un potente e leggero framework per canvas</li>
     <li><a class="external" href="http://processingjs.org" title="http://processingjs.org/">Processing.js</a> implementzione del linguaggio di visualizzazione Processing</li>
     <li><a class="external" href="http://easeljs.com/" title="http://easeljs.com/">EaselJS</a> è una libreria con un'API simile a Flash</li>
     <li><a class="external" href="http://www.liquidx.net/plotkit/" title="http://www.liquidx.net/plotkit/">PlotKit</a> è una libreria per la creazione di grafici e diagrammi</li>
     <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi" title="https://github.com/jeremyckahn/rekapi">Rekapi</a> è un'API per le animazioni Canvas basata sui keyframe</li>
     <li><a class="external" href="http://senchalabs.github.com/philogl/" title="http://senchalabs.github.com/philogl/">PhiloGL</a> è un framework WebGL per la visualizzazione di dati, programmazione creativa e lo sviluppo di giochi.</li>
     <li><a class="external" href="http://thejit.org/" title="http://thejit.org/">JavaScript InfoVis Toolkit</a> crea visualizzazioni di dati interattive per il Web con Canvas 2D</li>
     <li><a href="http://www.frame-engine.com" title="http://www.frame-engine.com">Frame-Engine</a> è un framework per lo sviluppo di applicazioni e giochi</li>
    </ul>

    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">ARGOMENTI CORRELATI</h2>

    <ul>
     <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/SVG" title="en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/WebGL" title="en-US/docs/WebGL">WebGL</a></li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<div>{{ HTML5ArticleTOC() }}</div>