Canvas How to convert getImageData to toDataUrl format

Question

How to convert getImageData to todataUrl

code lines: 
var data = ctx.getImageData(150,200,200,100);
var data = document.getElementById("canvas").toDataURL('image/gif');

First situation: 1 parameter x space, 2 y space, 3 and 4 x,y example image: http://postimg.org/image/lfogtwjn7/ so i got croped image data 200px x 100px Second situation i get full image toDataUrl: document.getElementById("canvas").toDataURL('image/gif');

How i can get cropped image like a getImageData(150,200,200,100) but toDataUrl format Maybe somebody have other offer

Answer 1

You could use additional canvas draw image in there and then get toDataURL()

var destCtx = destinationCanvas.getContext('2d');
destCtx.drawImage(sourceCanvas, 150,200,200,100);
var dataUrl =destCtx.toDataURL('image/png');