JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.12/fabric.js"></script>
<div id="lemu">
<canvas id='mycanvas' width='400' height='400' style='border:1px solid #000000;'></canvas>
<img src='' style="border:1px solid">
</div>
<div class="japu">click to copy the canvas </div>
<select><option value="1x1">36x24</option> <option value="36x48">36x24</option> <option value="36x48">36x96</option> </select>
JavaScript
$=jQuery;
$(document).ready(function () {
jQuery('.japu').click(function(){
var canstring = canvas.toDataURL();
jQuery('img').attr('src',canstring);
});
fabric.StaticCanvas.prototype.toCanvasElement = function(multiplier, cropping) {
multiplier = multiplier || 1;
cropping = cropping || { };
var scaledWidth = (cropping.width || this.width) * multiplier,
scaledHeight = (cropping.height || this.height) * multiplier,
zoomX = canvas.viewportTransform[0],
zoomY = canvas.viewportTransform[3],
originalWidth = this.width,
originalHeight = this.height,
newZoomX = zoomX * multiplier,
newZoomY = zoomY * multiplier,
vp = this.viewportTransform,
translateX = (vp[4] - (cropping.left || 0)) * multiplier,
translateY = (vp[5] - (cropping.top || 0)) * multiplier,
originalInteractive = this.interactive,
newVp = [newZoomX, 0, 0, newZoomY, translateX, translateY],
originalRetina = this.enableRetinaScaling,
canvasEl = fabric.util.createCanvasElement(),
originalContextTop = this.contextTop;
canvasEl.width = scaledWidth;
canvasEl.height = scaledHeight;
this.contextTop = null;
this.enableRetinaScaling = false;
this.interactive = false;
this.viewportTransform = newVp;
this.width = scaledWidth;
this.height = scaledHeight;
this.calcViewportBoundaries();
this.renderCanvas(canvasEl.getContext('2d'), this._objects);
this.viewportTransform = vp;
this.width = originalWidth;
this.height = originalHeight;
this.calcViewportBoundaries();
this.interactive = originalInteractive;
this.enableRetinaScaling = originalRetina;
this.contextTop = originalContextTop;
return canvasEl;
};
window.canvas = new fabric.Canvas('mycanvas');
...