JavaScript Canvas drawImage Tutorial
last modified April 3, 2025
In this article, we explore the Canvas drawImage method in JavaScript. This method is essential for drawing images onto HTML canvas elements. Mastering drawImage is crucial for creating rich graphics and visualizations.
Basic Definition
The drawImage method allows you to draw images, videos, or other canvas elements onto a canvas. It provides several overloads for different use cases. You can draw the entire image or just parts of it.
The method can scale, crop, and position images on the canvas. It works with HTMLImageElement, HTMLVideoElement, HTMLCanvasElement, and ImageBitmap.
Basic Image Drawing
This example demonstrates how to draw a simple image on canvas.
<!DOCTYPE html>
<html>
<head>
<title>Basic Canvas drawImage</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
ctx.drawImage(img, 50, 50);
};
</script>
</body>
</html>
In this basic example, we create a canvas element and get its 2D rendering context. We create an Image object and set its source to 'image.jpg'.
The drawImage method draws the image at position (50,50) when
it loads. This shows the simplest way to draw an image on canvas.
Scaling an Image
This example shows how to scale an image while drawing it.
<!DOCTYPE html>
<html>
<head>
<title>Scaling Image</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
// Draw image scaled to 200x150
ctx.drawImage(img, 50, 50, 200, 150);
};
</script>
</body>
</html>
Here we use the extended version of drawImage that includes width and height parameters. The image will be scaled to fit these dimensions.
The original image is drawn at (50,50) but resized to 200px wide and 150px tall. This demonstrates basic image scaling on canvas.
Cropping and Drawing Part of an Image
This example demonstrates how to crop and draw a portion of an image.
<!DOCTYPE html>
<html>
<head>
<title>Cropping Image</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
// Draw a 100x100 portion of the image starting at (20,20)
// Then scale it to 200x200 on canvas at (50,50)
ctx.drawImage(img, 20, 20, 100, 100, 50, 50, 200, 200);
};
</script>
</body>
</html>
This example uses the most complex version of drawImage with nine parameters. It crops a portion of the source image and draws it scaled on canvas.
The first four parameters after the image specify the source rectangle (crop). The last four parameters specify the destination rectangle (position and size).
Drawing Video Frames
This example shows how to draw video frames onto canvas.
<!DOCTYPE html>
<html>
<head>
<title>Video to Canvas</title>
</head>
<body>
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<canvas id="myCanvas" width="320" height="240"></canvas>
<script>
const video = document.getElementById('myVideo');
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
video.addEventListener('play', function() {
function drawFrame() {
if (video.paused || video.ended) return;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
requestAnimationFrame(drawFrame);
}
drawFrame();
});
</script>
</body>
</html>
This example captures video frames and draws them onto canvas in real-time. We add an event listener for the play event to start the drawing process.
The drawFrame function uses drawImage to copy the current video
frame to canvas. It continues drawing frames using requestAnimationFrame.
Creating a Sprite Sheet Animation
This example demonstrates creating an animation from a sprite sheet.
<!DOCTYPE html>
<html>
<head>
<title>Sprite Animation</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const spriteSheet = new Image();
spriteSheet.src = 'sprites.png';
let frame = 0;
const frameWidth = 50;
const frameHeight = 50;
const totalFrames = 8;
spriteSheet.onload = function() {
setInterval(animate, 100);
};
function animate() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Calculate current frame position
const sx = (frame % 4) * frameWidth;
const sy = Math.floor(frame / 4) * frameHeight;
// Draw current frame
ctx.drawImage(
spriteSheet,
sx, sy, frameWidth, frameHeight,
75, 75, frameWidth, frameHeight
);
// Advance to next frame
frame = (frame + 1) % totalFrames;
}
</script>
</body>
</html>
This example creates an animation by cycling through frames of a sprite sheet. The sprite sheet is assumed to be a grid of 4 columns and 2 rows of frames.
The animate function calculates the source position of each frame
and draws it centered on canvas. The animation loops every 100ms.
Source
MDN Canvas drawImage Documentation
In this article, we have explored various techniques for drawing images on HTML canvas. Mastering the drawImage method is essential for creating rich graphics and animations in web applications.
Author
List all JS Canvas tutorials.