toDataURL examples

Used in documentation (jsdoc tag)

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.2/fabric.min.js"></script>
<canvas id="c" width="600" height="400"></canvas>
<button onclick="doJPGExport()">export to jpg</button>
<button onclick="doCroppedPNGExport()">export cropped png</button>
<button onclick="doMultipliedPNGExport()">export 0.25 scaled png</button>
<br/>
 (see console for dataUrl results; in chrome you can right-click on small data urls & display them in a new tab --- yes I was lazy)

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');

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

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

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

doMultipliedPNGExport=()=>{
  // three times scaled dataURL
  console.log('0.25 scaled dataURL: ', canvas.toDataURL({
      format: 'png',
      multiplier: 0.25
  }));
};