JSFiddle - React, Tailwind, and code Playground

by tomfree

HTML

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


canvas.add(grp, rect3, rect4, rect5, rect6);

rect1.top = 30;

grp.height=500;

canvas.renderAll();