Chrome not drawing specific jpg image in canvas

Question

I'm trying to draw an image in a canvas. This works in Firefox but not in Chrome 49.

context.drawImage(backgroundImage, 0, 0);

JSFiddle: https://jsfiddle.net/kp5otnyu/3/

Image link: http://www.boardgame-online.com/img/stackoverflow_chrome_test.jpg

Something seems to be wrong with the image. We tried coping the image in another jpg that did draw, and then it worked. But what is wrong with this image?

Answer 1

EDIT: This is not an answer, all the cheers to @kaiido

Working example:

 var backgroundImage = new Image(); var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); canvas.width = 500; canvas.height = 100; backgroundImage.onload = function(){ context.clearRect(0, 0, 300, 300); context.drawImage(backgroundImage, 0, 0); } backgroundImage.src = "http://www.boardgame-online.com/img/stackoverflow_chrome_test.jpg"; $("#test").append(canvas); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div id="test"> </div> 

Not Working example:

 var backgroundImage = new Image(); var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); canvas.width = 400; canvas.height = 400; backgroundImage.onload = function(){ context.clearRect(0, 0, 300, 300); context.drawImage(backgroundImage, 0, 0); } backgroundImage.src = "http://www.boardgame-online.com/img/stackoverflow_chrome_test.jpg"; $("#test").append(canvas); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div id="test"> </div> 

Answer 2

此问题已在Chrome 50中解决。当我在更新的Chrome中打开JSFiddle时，该图将显示。