title: Slow Canvas Element
body: <p>Using the Canvas element, I draw a line from one element to another element
  Another element is draggable, and when dragging the element the line follows the draggable element.</p>
  
  <p>My problem is that the rendering apears slow (Fx 3.5 on a Mac PowerBook) 
  I think I have seen much better performance in Canvas before</p>
  
  <p>Anyone with Canvas experience who can give some performance tips?</p>
  
  <p>Thanks in advance</p>
  
  <p>The following method is called on the on drag event,</p>
  
  <pre><code>// Runs when the element is dragged.
  function onDrag(key)
  {
    var ctx = canvas.context;
    var fromRect = $('#box-' + key).offset();
    var fromHeight = $('#box-' + key).height();
    var fromWidth = $('#box-' + key).height();
  
    var toRect = $('#draggable').offset();
    var toWidth = $('#draggable').width();
  
    var startX = toRect.left + toWidth / 2;
    var startY = toRect.top + 4;
    var endX = fromRect.left + fromWidth / 2;
    var endY = fromRect.top + fromHeight / 2;
  
    ctx.clearRect(0, 0, 5000, 5000);
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.strokeStyle = "rgba(0, 0, 0,1)";
    ctx.stroke();
  </code></pre>
  
  <p>}</p>
  
  <p>Thanks for tips,</p>
  
  <p>best regards Eric</p>