How to apply antialiasing in HTML5 canvas drawImage()?

HTML5 Canvas provides built-in antialiasing through image smoothing properties to improve the quality of scaled images rendered with drawImage().

Setting Image Smoothing Quality

The primary way to control antialiasing is through the imageSmoothingQuality property:

<canvas id="canvas" width="400" height="300"></canvas>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Set antialiasing quality
ctx.imageSmoothingQuality = "high"; // "low", "medium", or "high"

// Create a small test image
const img = new Image();
img.onload = function() {
    // Draw scaled image with antialiasing
    ctx.drawImage(img, 0, 0, 200, 150);
};
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
</script>

Manual Antialiasing with Off-Screen Canvas

For better quality when scaling down large images, use an off-screen canvas to progressively reduce the image size:

<canvas id="mainCanvas" width="400" height="300"></canvas>

<script>
const canvas = document.getElementById('mainCanvas');
const ctx = canvas.getContext('2d');

function downsampleImage(img, targetWidth, targetHeight) {
    // Create off-screen canvas
    const offCanvas = document.createElement('canvas');
    const offCtx = offCanvas.getContext('2d');
    
    // Set initial size to half of original
    offCanvas.width = img.width * 0.5;
    offCanvas.height = img.height * 0.5;
    
    // First reduction to half size
    offCtx.drawImage(img, 0, 0, offCanvas.width, offCanvas.height);
    
    // Continue reducing if needed
    while (offCanvas.width > targetWidth * 2) {
        const tempCanvas = document.createElement('canvas');
        const tempCtx = tempCanvas.getContext('2d');
        
        tempCanvas.width = offCanvas.width * 0.5;
        tempCanvas.height = offCanvas.height * 0.5;
        
        tempCtx.drawImage(offCanvas, 0, 0, tempCanvas.width, tempCanvas.height);
        
        offCanvas.width = tempCanvas.width;
        offCanvas.height = tempCanvas.height;
        offCtx.drawImage(tempCanvas, 0, 0);
    }
    
    return offCanvas;
}

// Example usage
const img = new Image();
img.onload = function() {
    const smoothedCanvas = downsampleImage(img, 100, 75);
    ctx.drawImage(smoothedCanvas, 0, 0, 100, 75);
};
img.src = "/images/sample-image.jpg";
</script>

Comparison of Antialiasing Methods

Complete Example

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

<script>
const canvas = document.getElementById('demo');
const ctx = canvas.getContext('2d');

// Enable high-quality antialiasing
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = "high";

// Create test pattern
const testCanvas = document.createElement('canvas');
const testCtx = testCanvas.getContext('2d');
testCanvas.width = 100;
testCanvas.height = 100;

// Draw test pattern
testCtx.fillStyle = '#ff0000';
testCtx.fillRect(0, 0, 50, 50);
testCtx.fillStyle = '#0000ff';
testCtx.fillRect(50, 50, 50, 50);

// Draw without and with antialiasing for comparison
ctx.imageSmoothingEnabled = false;
ctx.drawImage(testCanvas, 10, 10, 200, 150);

ctx.imageSmoothingEnabled = true;
ctx.drawImage(testCanvas, 250, 10, 200, 150);

// Label the examples
ctx.fillStyle = '#000';
ctx.font = '14px Arial';
ctx.fillText('Without Antialiasing', 50, 180);
ctx.fillText('With Antialiasing', 290, 180);
</script>

Conclusion

Use imageSmoothingQuality for general antialiasing needs, and implement off-screen canvas downsampling for superior image quality when scaling down large images. The progressive reduction method provides the best results for critical applications.