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,
});
// Initialze the example
var rect1 = new fabric.Rect({
left: 100,
top: 100,
width: 100,
height: 100,
fill: "black"
});
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
var colors = ['white', 'yellow', 'cyan', 'greenyellow', 'hotpink', 'red', 'blue'];
colors.reduce((acc, item) => {
const step = 1 / colors.length;
const stepFrom = Object.keys(acc)[Object.keys(acc).length - 1] || 0;
const stepTo = Math.max(Object.keys(acc).length * step, step) - 0.0001;
return {
...acc,
[stepFrom]: item,
[stepTo]: item,
}
}, {});
rect1.setGradient('fill', {
type: 'linear',
x2: rect1.width,
colorStops: {
0: 'white',
.141: 'white',
.142: 'yellow',
.281: 'yellow',
.282: 'cyan',
.421: 'cyan',
.422: 'greenyellow',
.561: 'greenyellow',
.562: 'hotpink',
.701: 'hotpink',
.702: 'red',
.851: 'red',
.852: 'blue',
1: 'blue',
}
});
canvas.renderAll();