title: Crop Canvas / Export html5 canvas with certain width and height
body: <p>There are hundreds of tutorials, how one can crop an image by drawImage() on a canvas. </p>
  
  <pre><code>context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
  </code></pre>
  
  <p>However, I have a canvas that fills the user's browser. By exporting the canvas as an image I would like to export only an area of 640px*480px from (0|0). </p>
  
  <p>Problem: How can I tell javascript to use only 640*480 of the canvas for the toDataURL()?</p>
  
  <p>Here is what I have so far: </p>
  
  <pre><code>$("#submitGraphic").click( function(){
      var canvas = document.getElementsByTagName("canvas");
      // canvas context
      var context = canvas[0].getContext("2d");
      // get the current ImageData for the canvas
      var data = context.getImageData(0, 0, canvas[0].width, canvas[0].height);
      // store the current globalCompositeOperation
      var compositeOperation = context.globalCompositeOperation;
      // set to draw behind current content
      context.globalCompositeOperation = "destination-over";
      //set background color
      context.fillStyle = "#FFFFFF";
      // draw background/rectangle on entire canvas
      context.fillRect(0,0,canvas[0].width,canvas[0].height);
  
      // not working, seems to clear the canvas? browser hangs?
      // seems that I can click a white image in the background
      /*canvas[0].width = 640;
      canvas[0].height = 480;*/
  
      // not working either
      /*canvas[0].style.width  = '640px';
      canvas[0].style.height = '480px';*/
  
      // not working at all
      /*context.canvas.width = 640;
      context.canvas.height = 480;*/
  
      // write on screen
      var img = canvas[0].toDataURL("image/png");
      document.write('&lt;a href="'+img+'"&gt;&lt;img src="'+img+'"/&gt;&lt;/a&gt;');
  })
  </code></pre>
  
  <p>PS: I do not want to resize or scale, just clipping/cropping to the fixed window. <a href="https://stackoverflow.com/questions/3293727/how-to-change-dimensions-of-html5-canvas-without-it-scaling-content">Here</a> I read that you only specifiy canvas.width and canvas.height - but this clears the canvas.</p>