title: Tumblr and HTML5 - Canvas for Square Grid?
body: <p>I am trying to add HTML5 to a tumblr theme to generate 250px by 250px crops of the image posts found on a blog and use them in place of the normal 500px image. I am currently using the following code to load the images within the photo posts:</p>
  
  <pre><code>  &lt;canvas id="myCanvas" width="250" height="250"&gt;&lt;/canvas&gt;
    &lt;script&gt;
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();
  
    imageObj.onload = function() {
      // draw cropped image
      var sourceX = 150;
      var sourceY = 0;
      var sourceWidth = 250;
      var sourceHeight = 250;
      var destWidth = sourceWidth;
      var destHeight = sourceHeight;
      var destX = canvas.width / 2 - destWidth / 2;
      var destY = canvas.height / 2 - destHeight / 2;
  
      context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
    };
    imageObj.src = '{PhotoURL-500}';
    &lt;/script&gt;
  </code></pre>
  
  <p>With the above code, I am given a 250x250 crop of the last photo that would be loaded on the page in the position of the first photo post which can be seen <a href="http://squarephototest.tumblr.com" rel="nofollow">here</a>. I've done some research and from what I understand, the issue lies within imageObj.onload but I am not sure what alterations are necessary to make the code properly display the photos.</p>
  
  <p>Any ideas of what I can do to fix this?</p>