⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Drawing Images and Videos

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury

In this JavaScript exercise you will learn the three different types of parameter settings for drawing images, videos and canvas elements on the canvas element.

<!DOCTYPE html>
<html>
<head>
<style>
body{ margin:40px; background:#666; }
#my_canvas{ background:#FFF; border:#000 1px solid; }
</style>
<script>
var my_pic = new Image();
my_pic.src = "meface.jpg";
function draw(){
    var ctx = document.getElementById('my_canvas').getContext('2d');

    // drawImage() can take either an HTMLImageElement, an HTMLCanvasElement, 
    // or an HTMLVideoElement as the first parameter

    // drawImage(image, x, y);
    // ctx.drawImage(my_pic, 20, 20); // Positioning only

    // drawImage(image, x, y, w, h);
    // ctx.drawImage(my_pic, 20, 20, 100, 100); // Positioning and sizing

    // drawImage(my_pic, clipX, clipY, clipW, clipH, x, y, w, h);
    ctx.drawImage(my_pic, 0, 0, 200, 200, 20, 20, 200, 200); // Positioning, sizing, clipping
	
}
window.onload = draw;
</script>
</head>
<body>
<canvas id="my_canvas" width="500" height="350"></canvas>
</body>  
</html>
▲