HTML5 canvas image is not visible in chrome
<p>I am using HTML5 canvas and putting two images there but I am facing one problem which is, one image is loaded and visible in chrome but another image is only visible in mozilla but after refresh. I don't know why this is happening as I am new in canvas.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x = 0;
var y = 0;
var width = 900;
var height = 700;
var imageObj = new Image();
imageObj.onload = function() {
  context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'http://img13.deviantart.net/1550/i/2011/353/4/2/mobile_game_background_by_disnie-d4jmr8r.jpg';

var startImageObj = new Image();
startImageObj.onload = function() {
  context.drawImage(startImageObj, (canvas.width-startImageObj.width)/2, (canvas.height-startImageObj.height)/2)
};
startImageObj.src = 'http://assets.halfbrick.com/yc/v3/images/button-play.png';</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas" width="900" height="700"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://jsfiddle.net/cfucxet7/1/" rel="nofollow">fiddle</a></p>