Tag <canvas> jest pewnego rodzaju pustym tagiem <img>. Webmaster ustala wysokość i szerokość obszaru malowania. Zamiast atrybutu "alt", możliwe jest umieszczenie innego kodu HTML w środku tagu canvas jako alternatywnej treści.

Przykład tagu canvas z alternywnym tekstem:

<canvas id="myDrawing" width="200" height="200">
<p>Twoja przeglądarka nie obsługuje canvas.</p>
</canvas>

Zabawę z <canvas> należy rozpocząć od sprawdzenia, czy przeglądarka go obsługuje oraz od stworzenia kontekstu rysującego (drawing context).

 var drawingCanvas = document.getElementById('myDrawing');
// sprawdza czy element jest w DOM i czy przeglądarka obsługuje canvas
if(drawingCanvas.getContext) {
// Inicjuje dwu-wymiarowy tzw. "drawing context"
var context = drawingCanvas.getContext('2d');
//tutaj umieszczamy komendy canvas
}

Możemy przystąpić do "malowania". Jednym z prostszych przykładów może być uśmiechnięta buźka podobna do tej z testu Acid. Zaczynamy od stworzenia okrągłej twarzy:

context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

W powyższym kodzie oprócz kształtu ustalone zostały kolory zarówno obwiedni, jak i wypełnienia. To dopiero początek, do zrobienia pozostały jeszcze oczy, uśmiech oraz nos.

Cały kod wygląda następująco:

 
<script type="text/javascript">
window.onload = function() {
var drawingCanvas = document.getElementById('myDrawing');
if(drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d');

// twarz
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

// oczy
context.strokeStyle = "#000000";
context.fillStyle = "#FFFFFF";
context.beginPath();
context.arc(80,80,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

context.fillStyle = "#009966";
context.beginPath();
context.arc(80,80,5,0,Math.PI*2,true);
context.closePath();
context.fill();

context.strokeStyle = "#000000";
context.fillStyle = "#FFFFFF";
context.beginPath();
context.arc(120,80,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
context.fillStyle = "#009966";
context.beginPath();
context.arc(120,80,5,0,Math.PI*2,true);
context.closePath();
context.fill();

// nos
context.fillStyle = "#000000";
context.beginPath();
context.moveTo(93,100);
context.lineTo(100,93);
context.lineTo(107,100);
context.lineTo(100,107);
context.closePath();
context.fill();
 
// uśmiech
context.strokeStyle = "#000000";
context.beginPath();
context.moveTo(70,110);
context.quadraticCurveTo(100,150,130,110);
context.quadraticCurveTo(100,150,70,110);
context.closePath();
context.stroke();
}
}
</script>

Efektem końcowym będzie taki oto obrazek:

źródło: thinkvitamin.com