--- title: API canvas slug: Web/API/Canvas_API tags: - API - Canvas - Reference translation_of: Web/API/Canvas_API ---
Ajouté en HTML5, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts JavaScript. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.
Les applications Mozilla ont commencé à supporter <canvas> à partir de Gecko 1.8 (c'est-à-dire Firefox 1.5). L'élément a été introduit à l'origine par Apple pour le Dashboard d'OS X et pour Safari. Internet Explorer supporte <canvas> depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de <canvas> en incluant un script depuis le projet Explorer Canvas de Google.
L'élément <canvas> est aussi utilisé par WebGL pour afficher des graphismes 3D avec accélération matérielle sur des pages web.
Voilà un simple extrait de code qui utilise la méthode {{domxref("CanvasRenderingContext2D.fillRect()")}}.
<canvas id="canvas"></canvas>
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 100, 100);
Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 100, 100);</textarea>
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext("2d"); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var edit = document.getElementById('edit'); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener('click', function() { textarea.value = code; drawCanvas(); }); edit.addEventListener('click', function() { textarea.focus(); }) textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas);
{{ EmbedLiveSample('Playable_code', 700, 360) }}
Les interfaces liées au WebGLRenderingContext
sont référencées sous WebGL.
{{domxref("CanvasCaptureMediaStream")}} est lié.
<canvas>
mais aussi ses fonctionnalités avancées.<canvas>
.Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}} | {{Spec2('HTML WHATWG')}} |