setGradient examples

Used in documentation (jsdoc tag)

by tomfree

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



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

const grp = new fabric.Group([rect1, rect2]);//,{left:0, top:0, height:600, width:600, originX:'left', originY:'top'}

grp.width=600;
canvas.add(grp);

//rect1.top = 30;// without the

//grp.height=600;

grp.add(rect3);


canvas.renderAll();