toDataURL examples

Used in documentation (jsdoc tag)

by mcannon

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/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');

//NOTE: Any image (like the google map below) that are not hosted on the same server will be ignored by canvas.toDataURL

fabric.Image.fromURL('https://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=16&size=160x80&maptype=roadmap', function(img) {
  // add image onto canvas
  canvas.add(img);
});

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

canvas.add(new fabric.Rect({
    left: 150,
    top: 100,
    width: 50,
    height: 50,
    fill: '#FFCCCC',
    angle: 70
}));


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

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

// three times scaled dataURL
fabric.log('three times scaled dataURL: ', canvas.toDataURL({
    format: 'png',
    multiplier: 2
}));