toDataURL examples

Used in documentation (jsdoc tag)

HTML

<script src="https://cdn.jsdelivr.net/gh/fabricjs/fabric.js/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

var rect = new fabric.Rect({
  left: 250,
  top: 250,
  width: 300,
  height: 300,
  fill: '#29477F',
  angle: 30
});

var circle = new fabric.Circle({
  radius: 50,
  fill: 'gold'
});

canvas.add(rect, circle);

canvas.renderAll();

// jpeg dataURL with lower quality
console.log('jpeg dataURL with low quality: ', canvas.toDataURL({
  format: 'jpeg',
  quality: 0.3
}));

// cropped png dataURL
console.log('cropped png dataURL: ', canvas.toDataURL({
  format: 'png',
  left: 300,
  top: 250,
  width: 200,
  height: 150
}));

// three times scaled dataURL
console.log('three times scaled dataURL: ', canvas.toDataURL({
  format: 'png',
  multiplier: 2,
  filter: object => object.type === 'rect'
}));