title: Canvas rendering issues with Chrome 39 and hardware acceleration
body: <p>I have some problems with Chrome 39 and off-screen canvas rendering. It works fine when I load a <a href="https://s3.eu-central-1.amazonaws.com/transferxl-public/Monkeys-6000x4000.jpg" rel="nofollow noreferrer" title="6000x4000 JPEG image">6000x4000 JPEG image</a> into an ordinary  element:</p>
  
  <pre><code>var img = document.getElementById('org');
  img.src = "https://s3.eu-central-1.amazonaws.com/transferxl-public/Monkeys-6000x4000.jpg";
  </code></pre>
  
  <p>The image looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/DhTxg.jpg" alt="Normal image"></p>
  
  <p>When I load it via an off-screen image and render it to a canvas it breaks down on a lot of computers when Chrome hardware acceleration is enabled:</p>
  
  <pre><code>var img = document.createElement('img');
  img.onload = function() {
      var canvas = document.getElementById('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      var context = canvas.getContext('2d')
      context.drawImage(img, 0, 0);
  };
  img.src = "https://s3.eu-central-1.amazonaws.com/transferxl-public/Monkeys-6000x4000.jpg";
  </code></pre>
  
  <p>The image is distorted (see below) and drawing the image to the canvas takes almost 10 seconds (and is blocking the GUI thread):</p>
  
  <p><img src="https://i.stack.imgur.com/LzIxr.png" alt="Distorted image"></p>
  
  <p>When Chrome's hardware acceleration is disabled, everything works fine. Does somebody knows how to work around this issue? Can I disable Chrome's hardware acceleration from Javascript or do you know another solution?</p>
  
  <p>The complete Fiddle to demonstrate this issue can be found on <a href="http://jsfiddle.net/ramondeklein/k0wtaq9m/1/" rel="nofollow noreferrer">http://jsfiddle.net/ramondeklein/k0wtaq9m/1/</a>.</p>