title: animating custom shapes in html5 canvas
body: <p>I'm new to canvas in html5 and would like to know how to animate a custom shape with lots of coordinates. I searched the web but with n o results. I'm only seeing results for circles or squares. </p>
  
  <p>Here's an example of a random drawing. I would like it to move around the screen without setting coordinates for each point. <a href="http://jsfiddle.net/ZJdus/" rel="nofollow">http://jsfiddle.net/ZJdus/</a></p>
  
  <pre><code>var drawing = function(){
  // rand drawing drawing
    context.strokeStyle = "red";
      context.beginPath();
      context.moveTo(318, 200);
      context.lineTo(183, 87);
      context.lineTo(446, 125);
      context.lineTo(446, 202);
      context.lineTo(383, 236);
      context.lineTo(318, 202);
      context.lineTo(318, 125);
      context.lineTo(446, 125);
      context.lineTo(183, 236);
      context.lineTo(318, 125);
      context.lineTo(383, 187);
      context.lineTo(383, 125);
      context.lineTo(613, 180);
      context.lineTo(446,400);
      context.lineTo(413, 180);
      context.lineTo(350, 180);
      context.lineTo(318, 202);
      context.lineTo(350, 180);
      context.lineTo(183, 125);
      context.stroke();
  </code></pre>
  
  <p>};</p>
  
  <p>Is there a way to achieve this? </p>
  
  <p>I'm also fairly new to Javascript so please explain as much as possible if you can.</p>
  
  <p>Thanks</p>