Canvas rendering issue

Demonstrates issues with Chrome 39 hardware accelerated canvas rendering.

by ramondeklein

HTML

<body>
    <h1>Canvas rendering issue</h1>
    <p>
        This example demonstrates off-screen canvas rendering. I have experienced issues with canvas
        rendering with Chrome 39.0.2171.95 on different computers with hardware acceleration enabled.
    </p>
    <p>
        My Apple MacBook Pro (late 2011, AMD Radeon HD 6750M) renders the canvas incorrect. It seems
        to use the top-left 1024x1024 pixels and renders them in a 6x4 mosaic. It also takes almost
        10 seconds to draw the image. When I disable hardware acceleration in Chrome, then it renders
        fine and only takes 50 milliseconds to render the image.
    </p>
    
    <p>Original image (took <span id="org-duration">---</span>ms):</p>
    <img id="org"/>
    
    <p>Image rendered via canvas (load: <span id="load-duration">---</span>ms, draw: <span id="draw-duration">---</span>ms):</p>
    <canvas id="generated"/>
</body>

CSS

#org {
    width: 400px;
}

JavaScript

// This is the image that we want to draw. We need large images (6000x4000 pixels) to illustrate the problem.
// Even a slightly smaller image (5760x3840) works fine.

var imageUrl = 'https://s3.eu-central-1.amazonaws.com/transferxl-public/Monkeys-6000x4000.jpg';
//var imageUrl = 'https://s3.eu-central-1.amazonaws.com/transferxl-public/Monkeys-5760x3840.jpg';

// First step is to load the image into the ordinary <img> element (should be fine)
var start = new Date().getTime();
var orgImage = document.getElementById('org');
orgImage.onload = function () {
    // Show the duration of the image loading
    var durationElement = document.getElementById('org-duration');
    durationElement.innerHTML = (new Date().getTime() - start);
    start = new Date().getTime();

    // Second step is to load the image into an off-screen <img> element
    var newImage = document.createElement('img');
    newImage.onload = function () {
        // Show the duration of the image loading
        durationElement = document.getElementById('load-duration');
        durationElement.innerHTML = (new Date().getTime() - start);
        start = new Date().getTime();

        // Draw the image onto the canvas
        var canvas = document.getElementById('generated');
        canvas.width = orgImage.width;
        canvas.height = orgImage.height;
        var context = canvas.getContext('2d')
        context.drawImage(orgImage, 0, 0, canvas.width, canvas.height);

        // Show the duration of the canvas drawing
        durationElement = document.getElementById('draw-duration');
        durationElement.innerHTML = (new Date().getTime() - start);
    };

    // Load the image (the random feature is to disable caching)
    newImage.src = imageUrl + '?dummy=' + Math.floor((1 + Math.random()) * 0x10000000);
}
// Load the image (the random feature is to disable caching)
orgImage.src = imageUrl + '?dummy=' + Math.floor((1 + Math.random()) * 0x10000000);