HTML <canvas> etiketi (tag), bir web sayfasında programatik olarak çizim yapmak ve animasyonlar oluşturmak için kullanılan bir arabirim (interface) sağlar. Etiket, genellikle JavaScript ile kullanılır ve çizimleri ve animasyonları dinamik olarak oluşturma işine yarar.

Aşağıdaki örnekleri inceleyelim...

<canvas id="myCanvas" width="300" height="150"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(10, 10, 50, 50);
</script>

Bu örnekte, bir canvas oluşturulmuş ve JavaScript kodu ile canvas üzerine bir dikdörtgen çizilmiştir. fillRect() metodu ile çizilen dikdörtgenin rengi kırmızı (red) olarak belirlenmiştir.

<canvas id="myCanvas" width="300" height="150"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
</script>

Yukarıdaki örnekte, canvas üzerine bir yuvarlak çizilmiştir. beginPath() metodu ile yeni bir çizim başlatılmış ve arc() metodu ile yuvarlak çizilmiştir. stroke() metodu ise çizilen yuvarlak çizgisini görüntülemek için kullanılmıştır.

Son örneğimizi inceleyelim...

<canvas id="myCanvas" width="300" height="150"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.src = "image.png";
    img.onload = function(){
        ctx.drawImage(img,10,10);
    }
</script>

Bu örnekte, bir resim canvas üzerine yerleştirilmiştir. new Image() ile resim nesnesi oluşturulmuş ve src ile resmin kaynağı belirtilmiştir. onload event i (olayı) gerçekleştiğinde resim yüklenir ve canvas üzerine drawImage() metodu ile yerleştirilir.