Używanie drawImage with Canvas jest bardzo powolne w Chrome

Question

Próbowałem narysować dużą liczbę wystąpień pliku SVG na płótnie za pomocą drawImage. Tworząc pojedynczy element obrazu, wykorzystując SVG jako źródło, a następnie używając funkcji drawImage dla każdej instancji na płótnie, miałem nadzieję, że uda mi się stworzyć złożony obraz na płótnie bardzo szybko, nawet przy dużej liczbie instancji.

Pod względem wydajności działa to dobrze w Firefoksie - mogę rysować 60 000 wystąpień w około 300 ms. Ale w Chrome jest strasznie wolno: 16 000 wystąpień zajmuje ponad 5 sekund. Umieściłem wersję kodu na jsfiddle, która pokazuje problem w Chrome.

Mam przykład tego, jak nazywam drawImage poniżej, gdzie płótno jest wypełnione jak największymi rozmiarami zdjęć. Czytałem sugestię, aby spróbować użyć drugiego, ukrytego płótna do buforowania wszystkich wystąpień, a następnie zaktualizować widoczne płótno jednym wywołaniem. Ale to nie wpłynęło na wydajność, poszczególne wywołania drawImage wciąż wydają się grzęznąć.

Wszelkie przemyślenia na temat tego, co dzieje się nie tak i co mogę zrobić, aby to naprawić?

  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; 

Answer 1

Spowolnienie 1: Występuje, gdy albo źródła lub przeznaczenia płótno jest w pamięci RAM, a drugi płótno jest na GPU.

Spowolnienie 2: Występuje, gdy src i dest płótna są różne rozmiary

---

Stosowna bug: http://code.google.com/p/chromium/issues/detail?id=170021

zauważyłem ten sam problem, i uprościł sprawę rysunek jednej pustej płótno inne. Wydaje się, że nie jest to problemem, gdy płótna są tej samej wielkości, ale w pewnym momencie wydajność wymaga nurkowania w nosie. Oto jspref, a moje wyniki:

zauważyć różnicę w 255x255 do 100x100 i 260x260 do 100x100.