toDataURL examples

Used in documentation (jsdoc tag)

by Klaylton Fernando

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/all.js"></script>
<canvas id="c" width="600" height="600"></canvas>
<button class="btn">Salvar</button>

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: 250,
    width: 300,
    height: 300,
    fill: '#002200',
    angle: 30
}));

// 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
}));