title: HTML5 Canvas redraw-cycle performance optimisations
body: <p>We are building a CAD app that runs in a browser.</p>
  
  <ul>
  <li>C.A.D stands for <a href="http://en.wikipedia.org/wiki/Computer-aided_design" rel="nofollow noreferrer"><em>Computer Aided Design</em>.</a> </li>
  <li>Illustrator, CorelDraw, AutoCAD etc are some examples of CAD apps.</li>
  </ul>
  
  <p>It's based on <a href="http://paperjs.org" rel="nofollow noreferrer">Paper.js</a>, a very neat Canvas library that allows you to manipulate vectors programmatically.</p>
  
  <hr>
  
  <h2>The problem</h2>
  
  <p>The major issue I am having at the moment is redraw cycle performance.</p>
  
  <p>The redraw algorithm is 'dumb' (in terms of clever hacks to improve performance) and thus inefficient and slow - Rendering the Scene Graph items is dependent on a progressively slower redraw-cycle.</p>
  
  <p>As points-to-draw accumulate, each redraw cycle becomes slower and slower.</p>
  
  <p>The redraw scheme is as simple as it gets:</p>
  
  <ul>
  <li>clear the whole area</li>
  <li>take all Items from the Scene Graph</li>
  <li>redraw all Items.</li>
  </ul>
  
  <h2>The question</h2>
  
  <p>Are there any <em>classroom examples</em> of rendering optimizations in such cases - assuming I'd like to stop short of implementing a dirty-rectangles algorithm (drawing only areas that have changed)</p>
  
  <p><strong>Edit:</strong> I've experimented with manual on-the-spot rasterisation which works pretty good, I've posted an answer below.</p>