There are hundreds of tutorials, how one can crop an image by drawImage() on a canvas.

context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

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).

Problem: How can I tell javascript to use only 640*480 of the canvas for the toDataURL()?

Here is what I have so far:

$(#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('<a href='+img+'><img src='+img+'/></a>');

})

PS: I do not want to resize or scale, just clipping/cropping to the fixed window. Here I read that you only specifiy canvas.width and canvas.height - but this clears the canvas.