setPattern examples

Used in documentation (jsdoc tag)

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>
<button id="toggle">Toggle repeat</button>

CSS

canvas {
    border: 1px solid #999;
}
button {
    margin-top: 20px;
}

JavaScript

// Do some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5
});

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

var rect = new fabric.Rect({
    width: 150,
    height: 150,
    fill: '#29477F'
});
canvas.add(rect);
rect.center().setCoords();

fabric.util.loadImage('https://www.google.fr/search?biw=1242&bih=602&tbm=isch&sa=1&ei=xRRgW7zUM4WEadzfnYAH&q=gddfhf&oq=gddfhf&gs_l=img.3...3296.4345.0.4883.0.0.0.0.0.0.0.0..0.0....0...1c.1.64.img..0.0.0....0.UxPQeLerCJ0#imgrc=VZbTjTjY9ApLyM:', function (img) {
    rect.setPatternFill({
        source: img,
        repeat: 'repeat'
    });
    canvas.renderAll();
});

fabric.util.addListener(document.getElementById('toggle'), 'click', function () {
    var obj = canvas.item(0);

    if (!obj.fill instanceof fabric.Pattern) return;
    
    obj.fill.repeat = obj.fill.repeat === 'repeat' 
        ? 'repeat-x'
        : obj.fill.repeat === 'repeat-x'
            ? 'repeat-y'
            : obj.fill.repeat === 'repeat-y'
                ? 'no-repeat'
                : 'repeat';

    canvas.renderAll();
});