JSFiddle - React, Tailwind, and code Playground

by Eugene Vilder

HTML

<canvas id="c" width="800" height="800"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');


var yellow = new fabric.Circle({
  top: 200,
  left: 0,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'yellow'
});
canvas.add(yellow);


var red = new fabric.Rect({
  top: 0,
  left: 0,
  width: 300,
  height: 300,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'red',
  rx: 40
});
canvas.add(red);


var blue = new fabric.Circle({
  top: 150,
  left: 80,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'blue',
    globalCompositeOperation: 'source-atop'
});
canvas.add(blue);



var green = new fabric.Circle({
  top: 0,
  left: 0,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'green'
});
canvas.add(green);