Blending two images with HTML5 canvas

To blend two images using HTML5 canvas, you need to manipulate pixel data from both images and combine them in equal proportions (50-50). This technique uses the canvas getImageData() and putImageData() methods.

HTML Structure

First, set up the HTML elements with the images and canvas:

<img src="/html5/images/html5-mini-logo.jpg" id="myImg1" style="display:none;">
<img src="/html5/images/html5-mini-logo.jpg" id="myImg2" style="display:none;">

<p>Blended image:</p>
<canvas id="canvas" style="border: 1px solid #000;"></canvas>

<script>
window.onload = function () {
    var myImg1 = document.getElementById('myImg1');
    var myImg2 = document.getElementById('myImg2');
    var myCanvas = document.getElementById("canvas");
    var ctx = myCanvas.getContext("2d");

    // Set canvas dimensions to match first image
    var w = myImg1.width;
    var h = myImg1.height;
    
    myCanvas.width = w;
    myCanvas.height = h;

    // Draw first image and get its pixel data
    ctx.drawImage(myImg1, 0, 0);
    var image1 = ctx.getImageData(0, 0, w, h);
    var imageData1 = image1.data;

    // Draw second image and get its pixel data
    ctx.drawImage(myImg2, 0, 0);
    var image2 = ctx.getImageData(0, 0, w, h);
    var imageData2 = image2.data;

    // Blend the images pixel by pixel
    var pixels = 4 * w * h; // 4 values per pixel (RGBA)
    
    while (pixels--) {
        imageData1[pixels] = imageData1[pixels] * 0.5 + imageData2[pixels] * 0.5;
    }
    
    // Put the blended data back to canvas
    ctx.putImageData(image1, 0, 0);
};
</script>

How It Works

The blending process follows these steps:

1. Get pixel data: getImageData() returns an ImageData object containing RGBA values
2. Blend formula: Each pixel value = (pixel1 × 0.5) + (pixel2 × 0.5)
3. Apply blending: Loop through all pixel values and apply the 50-50 blend
4. Display result: putImageData() renders the blended image back to canvas

Custom Blend Ratios

You can adjust the blending proportions by changing the multipliers:

// 70% of first image, 30% of second image
imageData1[pixels] = imageData1[pixels] * 0.7 + imageData2[pixels] * 0.3;

// 25% of first image, 75% of second image  
imageData1[pixels] = imageData1[pixels] * 0.25 + imageData2[pixels] * 0.75;

Key Points

• Both images should ideally have the same dimensions for best results
• The pixel array contains 4 values per pixel: Red, Green, Blue, Alpha (RGBA)
• The blending formula ensures the total always equals 1.0 (0.5 + 0.5 = 1.0)
• Images are hidden with display:none to show only the blended result

Browser Compatibility

This technique works in all modern browsers that support HTML5 canvas. The getImageData() method may have CORS restrictions when loading images from external domains.

Conclusion

HTML5 canvas image blending combines pixel data from two images using mathematical formulas. This technique is useful for creating fade effects, overlays, and artistic image combinations in web applications.