Crop Canvas / Export HTML5 Canvas with certain width and height

For this, create a temporary canvas for drawing on the current canvas. After that use toDataUrl() method on the temporary canvas −

var c = document.getElementsByTagName("canvas");
var ctx = c[0].getContext("2d");
var data = ctx.getImageData(0, 0, c[0].width, c[0].height);
var compositeOperation = ctx.globalCompositeOperation;

ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "#800000";
ctx.fillRect(0,0,c[0].width,c[0].height);

var tempCanvas = document.createElement("canvas"),
tCtx = tempCanvas.getContext("2d");
tempCanvas.width = 550;
tempCanvas.height = 280;
tCtx.drawImage(canvas[0],0,0);

Rishi Rathor

Updated on 25-Jun-2020 07:56:45

• Related Questions & Answers
• Measure text height on an HTML5 canvas element
• Drop Shadow with HTML5 Canvas
• Translating HTML5 canvas
• HTML5 Canvas distorted
• HTML5 Canvas Transformation
• Create a pattern with HTML5 Canvas
• Draw Bezier Curve with HTML5 Canvas
• Draw a shadow with HTML5 Canvas
• Blending two images with HTML5 canvas
• HTML5 Canvas Font Size Based on Canvas Size
• HTML5 Canvas Transformation Matrix
• HTML5 Canvas Circle Text
• HTML5 Canvas Degree Symbol
• How to handle mousedown and mouseup with HTML5 Canvas
• How to use images with HTML5 canvas?