Article Categories

Selected Reading

Draw part of an image inside HTML5 canvas

Javascript Web Development Front End Scripts

Drawing part of an image in HTML5 canvas is useful for creating sprites, animations, or displaying specific portions of larger images. The key is using the extended drawImage() method with clipping parameters.

Syntax

context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Parameters

Parameter	Description
`sx, sy`	Starting coordinates in source image
`sWidth, sHeight`	Width and height of clipped area in source
`dx, dy`	Destination coordinates on canvas
`dWidth, dHeight`	Size to draw on canvas

Example: Drawing Part of an Image

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Image Clipping</title>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200" style="border:1px solid #000;"></canvas>

    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        
        const img = new Image();
        img.onload = function() {
            // Draw part of image: clip from (50,30) with size 100x80, 
            // draw at (10,10) with size 150x120
            ctx.drawImage(img, 50, 30, 100, 80, 10, 10, 150, 120);
        };
        
        // Using a placeholder image - replace with your image URL
        img.src = 'data:image/svg+xml;base64,' + btoa(`
            <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
                <rect width="200" height="150" fill="#e0e0e0"/>
                <circle cx="60" cy="60" r="20" fill="#ff6b6b"/>
                <circle cx="140" cy="60" r="20" fill="#4ecdc4"/>
                <rect x="40" y="100" width="120" height="20" fill="#45b7d1"/>
                <text x="100" y="130" text-anchor="middle" fill="#333">Sample Image</text>
            </svg>
        `);
    </script>
</body>
</html>

Sprite Animation Example

<!DOCTYPE html>
<html>
<head>
    <title>Sprite Animation</title>
</head>
<body>
    <canvas id="spriteCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>

    <script>
        const canvas = document.getElementById('spriteCanvas');
        const ctx = canvas.getContext('2d');
        
        // Create a simple sprite sheet
        const spriteSheet = new Image();
        spriteSheet.onload = function() {
            let currentFrame = 0;
            const frameWidth = 80;
            const frameHeight = 80;
            const totalFrames = 3;
            
            function animate() {
                // Clear canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // Calculate source position based on current frame
                const sx = currentFrame * frameWidth;
                const sy = 0;
                
                // Draw current frame
                ctx.drawImage(spriteSheet, sx, sy, frameWidth, frameHeight, 160, 60, frameWidth, frameHeight);
                
                // Move to next frame
                currentFrame = (currentFrame + 1) % totalFrames;
                
                setTimeout(animate, 500); // Change frame every 500ms
            }
            
            animate();
        };
        
        // Create a simple sprite sheet with 3 frames
        spriteSheet.src = 'data:image/svg+xml;base64,' + btoa(`
            <svg width="240" height="80" xmlns="http://www.w3.org/2000/svg">
                <!-- Frame 1 -->
                <rect x="0" y="0" width="80" height="80" fill="#ff6b6b"/>
                <circle cx="40" cy="40" r="15" fill="white"/>
                
                <!-- Frame 2 -->
                <rect x="80" y="0" width="80" height="80" fill="#4ecdc4"/>
                <circle cx="120" cy="40" r="20" fill="white"/>
                
                <!-- Frame 3 -->
                <rect x="160" y="0" width="80" height="80" fill="#45b7d1"/>
                <circle cx="200" cy="40" r="25" fill="white"/>
            </svg>
        `);
    </script>
</body>
</html>

Key Points

Always wait for the image to load using the onload event
The 9-parameter drawImage() method provides full control over clipping and scaling
Source coordinates (sx, sy) start from the top-left of the original image
You can scale the clipped portion by using different destination dimensions

Common Use Cases

Creating sprite-based animations from sprite sheets
Displaying avatars or profile pictures with specific cropping
Building tile-based games with tileset images
Creating image galleries with thumbnail previews

Conclusion

The extended drawImage() method with 9 parameters gives you precise control over drawing specific portions of images. This technique is essential for sprite animations, image cropping, and efficient graphics rendering in canvas applications.

Rishi Rathor

Updated on: 2026-03-15T23:18:59+05:30

561 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next