I am trying to draw a large number of instances of an SVG file onto the canvas using drawImage. By creating one image element using SVG as the source, and then using drawImage for each instance on the canvas, I hoped that I could create a composite image on the canvas very quickly, even with a large number of copies.
In terms of performance, this works well in Firefox - I can attract 60,000 instances in about 300 ms. But on Chrome, it's terribly slow: 16,000 copies take more than 5 seconds. I put the version of the code on jsfiddle , which demonstrates the problem in Chrome.
I have an example of what I call drawImage below, where the canvas is filled with as many x-sized images as possible. I read a suggestion to try a second hidden canvas to buffer all instances, and then update the visible canvas with one call. But this did not affect performance, individual drawImage calls still seem tiring.
Any thoughts on what is going wrong and what can I do to fix it?
svgImg = new Image; can.width = 1800; can.height = 900; svgImg.onload = function () { if (internalSize == size) return; internalSize = size; var timeBefore = new Date().getTime(); var tot = 0; var canWidth = can.width; var canHeight = can.height; for (var x = 0; x < canWidth; x += size) { for (var y = 0; y < canHeight; y += size) { ctx.drawImage(svgImg, x, y, size, size); tot++; } } document.getElementById('count').innerHTML = "Total Count: " + tot; var timeAfter = new Date().getTime(); }; svgImg.src = "http://www.w3.org/Icons/SVG/svg-logo.svg"; svgImg.width = size; svgImg.height = size;
Derekmuk
source share