title: html5 image cropping
body: <p>I'm using <a href="https://github.com/Phrogz/context-blender" rel="nofollow">context-blender</a> to apply a multiply effect on the first 192 pixels of the html background-image with a fixed color to achieve a transparency effect on the header of the page.</p>
  
  <p>On the html I have 2 canvas. One for the part of the image to apply the multiply effect and one for the color.</p>
  
  <p>On the javascript, after setting the color of the color-canvas and the width of both canvas to the window.innerWidth I'm getting the background image with: </p>
  
  <pre><code>imageObj.src = $('html').css('background-image').replace(/^url|[\(\)]/g, '');
  </code></pre>
  
  <p>Now comes the problem. I want to draw a cropped image to the image to the image-canvas so I can apply the multiply effect. I'm trying to do the following:</p>
  
  <pre><code>imageObj.onload = function(){
      // getting the background-image height
      var imageHeight = window.innerWidth * imageObj.height / imageObj.width;
  
      // get the corresponding pixels of the source image that correspond to the first 192 pixels of the background-image
      var croppedHeight = 192 * imageObj.height / imageHeight;
  
      // draw the image to the canvas
      imageCanvas.drawImage(imageObj, 0, 0, imageObj.width, croppedHeight, 0, 0, window.innerWidth, 192);
  
      // apply the multiply effect
      colorCanvas.blendOnto( imageCanvas, 'multiply');
  }
  </code></pre>
  
  <p>But I'm doing something wrong getting the cropped height. </p>
  
  <p>Ex: For an 1536x1152 image and a 1293x679 browser container, the value I'm getting for the source cropped height is 230 but to get the correct crop I need to use something around 296.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>I'm using background-size: cover on the css to create the background-image</p>
  
  <p><strong>Edit2:</strong></p>
  
  <p>I created a <a href="http://jsfiddle.net/254ck/4/" rel="nofollow">fiddle</a> to illustrate the problem. If you uncomment the line <code>//cHeight *= magicConstant;</code> the cropped image looks a lot better but things stop making sense. I removed the multiply effect on the fiddler but that's not required to reproduce the problem. I also noticed that the behavior changed if I remove the second canvas from the URL.</p>
  
  <p>Btw, this behavior happened with google chrome, but I think the same thing happens on safari and firefox.</p>