title: How can I manipulate the slices of an image separately using canvas?
body: <p>I am new to the "canvas" term in HTML. I sliced a picture in 2 halves, leaving a small gap between them. I want to rotate each half separately to create a half folding effect.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function () {
              var myCanv = document.getElementById("myCanvas");
              var context = myCanv.getContext('2d');
              var myImage = document.getElementById("myImage");
              context.drawImage(myImage, 0, 0, myImage.width / 2, myImage.height, 0, 0, myCanv.width / 2, myCanv.height);
              context.drawImage(myImage, (myImage.width / 2) + 1, 0, myImage.width / 2, myImage.height, (myCanv.width / 2) + 0.5, 0, myCanv.width / 2, myCanv.height);
          };</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there any way that I can do this using canvas? I appreciate any help. :)</p>
  
  <p><a href="http://jsfiddle.net/9771a9ro/3/" rel="nofollow">Here is a fiddle.</a> I know it's not much but any hint is useful.</p>