Javascript canvas how to drawImage a lot of images <p>How i can draw a lot of image in canvas?</p> <p>I have a lot of images url array and need output it. How to do with good perfomance.</p> <p>me example code (jsfiddle: <a href="http://jsfiddle.net/6sunguw4/" rel="nofollow">http://jsfiddle.net/6sunguw4/</a>): </p> <pre><code> $(document).ready(function () { var bgCanvas = document.getElementById("bgCanvas"); var bgCtx = bgCanvas.getContext("2d"); bgCanvas.width = window.innerWidth; bgCanvas.height = window.innerHeight + 200; var array = new Array(); array[1] = 'https://developer.chrome.com/webstore/images/calendar.png'; array[2] = 'http://www.w3schools.com/html/html5.gif'; array[3] = 'http://www.linosartele.lt/wp-content/uploads/2014/08/images-9.jpg'; img0 = new Image(); img0.onload = function() { bgCtx.drawImage(img0, 0,0, 100, 100); } img0.src = array[1]; img2 = new Image(); img2.onload = function() { bgCtx.drawImage(img2, 100,0, 100, 100); } img2.src = array[2]; img3 = new Image(); img3.onload = function() { bgCtx.drawImage(img3, 200,0,100,100); } img3.src = array[3]; }); </code></pre>