fabric.js ver 2.4.1 toDataURL

by uemon

HTML

<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <canvas id="c"></canvas><br>
  <img id="imgContainer" src=""><br>
  <button id="toDataUrlBtn">
  To PNG
  </button>
  <button id="toJPG">
  To JPG
  </button>
</body>
</html>

JavaScript

let canvas = new fabric.Canvas(document.getElementById('c'), {
	width: 500,
  height: 200,
  backgroundColor: '#cccccc',
});

canvas.controlsAboveOverlay = true;

let clipPath = new fabric.Circle({
    radius: 100,
  });
  
canvas.clipPath = clipPath;

fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', (img) => {
	//img.clipPath = clipPath;
  img.scaleToHeight(canvas.getHeight());
	canvas.add(img);
  canvas.renderAll();
},{
    crossOrigin: 'Anonymous'
});

document.getElementById('toDataUrlBtn').addEventListener('click', () => {
		console.log('data url', canvas.toDataURL());
    document.getElementById('imgContainer').src = canvas.toDataURL();
});
document.getElementById('toJPG').addEventListener('click', () => {
		console.log('data url', canvas.toDataURL({format: 'jpeg'}));
    document.getElementById('imgContainer').src = canvas.toDataURL({format: 'jpeg'});
});