Canvas API (2D Drawing) di HTML5

Berikut ini adalah contoh kode penulisan untuk menguji Canvas API (2D Drawing) pada HTML5

Kode HTML:

<canvas id="canvas" width="200" height="200"></canvas>

Kode Javascript:

<script>
window.onload = function() {
    var canvas = document.getElementById("canvas");
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(50, 0, 0)";
        ctx.fillRect (0, 0, 100, 100);

        ctx.fillStyle = "rgba(100, 20, 0, 0.5)";
        ctx.fillRect (10, 30, 90, 120);
    }
}
</script>

hasilnya akan tampak sbb:

Ditambahkan di HTML5, elemen HTML dapat digunakan untuk menggambar grafik melalui skrip dalam JavaScript. Misalnya, ini bisa digunakan untuk menggambar grafik, membuat komposisi foto, membuat animasi, atau bahkan melakukan pemrosesan video real-time atau rendering.

Aplikasi Mozilla mendapatkan dukungan untuk yang dimulai dengan Gecko 1.8 (yaitu Firefox 1.5). Unsur awalnya diperkenalkan oleh Apple untuk OS X Dashboard dan Safari. Internet Explorer mendukung dari versi 9 dan seterusnya; untuk versi IE sebelumnya, halaman dapat secara efektif menambahkan dukungan untuk dengan menyertakan skrip dari proyek Kanvas Explorer Google. Google Chrome dan Opera 9 juga mendukung .