title: Canvas performance in Dart
body: <p>This problem is related to my framework VilTAGE (<a href="https://github.com/ViliX64/VilTAGE" rel="nofollow">https://github.com/ViliX64/VilTAGE</a>). It's an ASCII web game framework, that renders to Canvas. The problem is, that the drawing time is twice as long as the computation time.</p>
  
  <p>The way the rendering works now is that there is a HashMap of each CharNode (an object, with a text character, color, etc..) and CanvasElement, that has the text drawn onto it. When the loop wants to draw a CharNode (15-30x a second), it goes through the HashMap, find required CanvasElement and renders it to the main CanvasElement. (See <a href="https://github.com/ViliX64/VilTAGE/blob/master/lib/etc/utility.dart" rel="nofollow">https://github.com/ViliX64/VilTAGE/blob/master/lib/etc/utility.dart</a>).</p>
  
  <p>The individual CanvasElement snaps are small (usually about 10x10). They are drawn using drawImage(..);</p>
  
  <p>The problem is, that in a game with 70x40 CharNodes, the game runs (unsuprisingly) very slow and even more, when compiled to JavaScript.</p>
  
  <p>Is there any obvious mistake I am making or could you please give me any tips of improving the performance?</p>
  
  <p>EDIT 1: It runs the slowest on Firefox and IE. Performance on Google Chrome is better.</p>