Download Canvas Image Clipping

by Ryan Rutkin

JavaScript

//Create Main Canvas
var MainCanvas = document.createElement('canvas');
MainCanvas.width = 300;
MainCanvas.height = 300;
document.body.appendChild(MainCanvas);

//Get context of main canvas
var main_ctx = MainCanvas.getContext('2d');

//Draw Blue Rect
main_ctx.beginPath();
main_ctx.rect(0, 0, MainCanvas.width, MainCanvas.height);
main_ctx.fillStyle = '#E0EAF4';
main_ctx.fill();
main_ctx.closePath();

//Set Grey Rect Control Values
var innerBoxPerc = 50;
var greyBoxStartX = MainCanvas.width * ((1 - (innerBoxPerc / 100)) / 2);
var greyBoxStartY = MainCanvas.height * ((1 - (innerBoxPerc / 100)) / 2);
var greyBoxWidth = MainCanvas.width * (innerBoxPerc / 100);
var greyBoxHeight = MainCanvas.height * (innerBoxPerc / 100);

//Draw Grey Rect
main_ctx.beginPath();
main_ctx.rect(
	greyBoxStartX,
    greyBoxStartY,
    greyBoxWidth,
    greyBoxHeight
);
main_ctx.fillStyle = '#828387';
main_ctx.fill();
main_ctx.closePath();

//Make a Canvas to copy the data you would like to download to
var hidden_canv = document.createElement('canvas');
hidden_canv.style.display = 'none';
document.body.appendChild(hidden_canv);
hidden_canv.width = greyBoxWidth;
hidden_canv.height = greyBoxHeight;

//Draw the data you want to download to the hidden canvas
var hidden_ctx = hidden_canv.getContext('2d');
hidden_ctx.drawImage(
    MainCanvas, 
    greyBoxStartX,//Start Clipping
    greyBoxStartY,//Start Clipping
    greyBoxWidth,//Clipping Width
    greyBoxHeight,//Clipping Height
    0,//Place X
    0,//Place Y
    hidden_canv.width,//Place Width
    hidden_canv.height//Place Height
);

//Create a download URL for the data
var hidden_data = hidden_canv.toDataURL("image/png").replace("image/png", "image/octet-stream"); 

//Make a download link
var downloadAnchor = document.createElement('a');
downloadAnchor.setAttribute('download', 'GreySquare.png');
downloadAnchor.innerHTML = "Download the Grey Square!";
downloadAnchor.setAttribute('href', hidden_data);
document.body.appendChild(downloadAnchor);