setGradient examples

Used in documentation (jsdoc tag)

by firegroove

HTML

<script src="https://rawgithub.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');

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

// Initialze the example
var rect1 = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 100,
    fill: '#ffda4f'
});
var rect2 = new fabric.Rect({
    left: 250,
    top: 100,
    width: 100,
    height: 100,
    fill: 'rgb(111,154,211)'
});
var rect3 = new fabric.Rect({
    left: 400,
    top: 100,
    width: 100,
    height: 100,
    fill: 'rgb(166,111,213)'
});
var rect4 = new fabric.Rect({
    left: 100,
    top: 400,
    width: 100,
    height: 100,
    fill: '#ffda4f'
});
var rect5 = new fabric.Rect({
    left: 250,
    top: 400,
    width: 100,
    height: 100,
    fill: 'rgb(111,154,211)'
});
var rect6 = new fabric.Rect({
    left: 400,
    top: 400,
    width: 100,
    height: 100,
    fill: 'rgb(166,111,213)'
});
canvas.add(rect1, rect2, rect3, rect4, rect5, rect6);

/**
 * setGradient linear gradients example
 */

// horizontal linear gradient
rect1.setGradient('fill', {
    type: 'linear',
    x1: -rect1.width / 2,
    y1: 0,
    x2: rect1.width / 2,
    y2: 0,
    colorStops: {
        0: '#ffe47b',
        1: 'rgb(111,154,211)'
    }
});

// vertical linear gradient
rect2.setGradient('fill', {
    type: 'linear',
    x1: 0,
    y1: -rect2.height / 2,
    x2: 0,
    y2: rect2.height / 2,
    colorStops: {
        0: '#ff4040',
        1: '#e6399b'
    }
});

// diagonal linear gradient
rect3.setGradient('fill', {
    type: 'linear',
    x1: -rect3.width / 2,
    y1: -rect3.height / 2,
    x2: rect3.width / 2,
    y2: rect3.height / 2,
    colorStops: {
        0: 'rgb(166,111,213)',
        0.5: 'rgba(106, 72, 215, 0.5)',
        1: '#200772'
    }
});

/**
 * setGradient radial gradients example
 */

// radial...