JSFiddle - React, Tailwind, and code Playground

by mkdizajn

HTML

<canvas id="canvas" width="400" height="300"></canvas>

CSS

#canvas {
  border: 1px solid #ccc;
  border-radius: 3px;
}

JavaScript

let canvas = new fabric.Canvas('canvas')
let text = new fabric.Text('start!', {
	top: 150,
  left: 150,
  fontStyle: 'italic'
})
let cb = _ =>	console.log('modified!')

let db = _ => console.log('dblclick!')

let time = 0
let sl = _ => {
	time = new Date().getTime()
  console.log('select!')
}
canvas.add(new fabric.Rect({
	width: 100,
  height: 100,
  fill: 'green',
  top: 35,
  left: 175
})).add(new fabric.Circle({
	top: 100,
  left: 100,
  radius: 20,
  fill: '#e4393c'
})).add(text)

// canvas.on('object:mouse:dblclick', db)
canvas.on('mouse:dblclick', db)
canvas.on('event:mousedblclick', db)
// canvas.on('object:selected', sl)
// canvas.on('object:modified', cb)