O elemento canvas, novidade do HTML 5, permite que a informação para a construção de imagens baseadas em pixels seja inserida diretamente no código do documento.
O elemento canvas apenas delimita em que local da tela isto acontece. O processo de desenho é controlado por uma API específica para este elemento que interage com JavaScript.
Por enquanto, as imagens criadas são objetos em duas dimensões (2D), mas já existem experimentos para construção de objetos 3D com a API Canvas.
JavaScript
<script>
function desenhar(){
var desenho = document.getElementById('figura');
var context = desenho.getContext('2d');
context.fillStyle = '#00FFFF'
context.fillRect(50,50,200, 200);
}
</script>
HTML
<p><canvas id="figura" width="300" height="300"></canvas></p> <p><button onClick="desenhar()">Desenhar</button></p>