title: how to split a canvas diagonally or non-square pieces
body: <p>Say I have a canvas that's a rectangle.   I want to take that canvas and split it diagonally and be able to manipulate those pieces to do whatever I want.</p>
  
  <p>My end goal is to have a rectangle split diagonally and the 2 pieces animate off screen in opposite directions.  I was thinking of doing this entirely within the canvas in an animation loop or converting each segment into an image element and using CSS3 animations to move those pieces.  I'm just trying to figure out the best way to do this.</p>
  
  <p>The code, codepen link, and image below are just to illustrate where I want my canvas to be split.  You'll see it's not an exact split with equal sides.</p>
  
  <p><a href="http://codepen.io/FranciscoG/pen/YPjzbQ" rel="nofollow noreferrer">http://codepen.io/FranciscoG/pen/YPjzbQ</a></p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;img id="dog" src="http://i.imgur.com/1GUzYh9.jpg" width="375"
    height="667"&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  var container = document.getElementById('container');
  var dogImg = document.getElementById('dog');
  
  function convertImageToCanvas(image) {
      var canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext("2d").drawImage(image, 0, 0);
      return canvas;
  }
  
  function drawLine(canvas) {
    var context = canvas.getContext('2d');
    context.beginPath();
    context.moveTo(0,0);
    context.lineTo(345, 0);
    context.lineTo(0, 567);
    context.lineTo(0,0);
    context.stroke();
    context.closePath();
    return canvas;
  };
  
  var newDog = convertImageToCanvas(dogImg);
  var divided = drawLine(newDog);
  container.innerHTML = "";
  container.appendChild(divided)
  &lt;/script&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/hyK0n.png" alt="enter image description here"></p>