JSFiddle - React, Tailwind, and code Playground

by robert chang

HTML

<script src="//cdn.bootcss.com/fabric.js/1.6.0-rc.1/fabric.js"></script>
<body>
    <div id="canvasContainer">
        <canvas id="canvas" width="300" height="300"></canvas>
    </div>

CSS

#canvasContainer {
    background-image: url(data:image/gif;base64,R0lGODlhCgAKAIAAAOLi4v///yH5BAAHAP8ALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==);
    display: inline-block;
    border: 2px solid #ccc;
}

CoffeeScript

window.canvas = canvas = new (fabric.Canvas)('canvas')
x = 75
y = 75
zoom = 2
centerX = canvas.width / 2
centerY = canvas.height / 2
colours = ['', 'blue', 'red', 'green', 'yellow']
dots = [];
addDot = (i) ->
  dot = new (fabric.Circle)(
    top: y * i
    left: x * i
    originX: 'center'
    originY: 'center'
    radius: 30 #150 - 30 * i
    fill: colours[i])
  console.log 'Point ', colours[i], dot.left, dot.top
  dots.push(dot)


i = 1
while i < 4
  addDot(i)
  i++
group = new fabric.Group(dots,{
top: 0,
left: 0
});
canvas.add(group)
group.on 'selected', ->
  zoom = canvas.getZoom();
  newzoom = 1.1*zoom;
  tempobj = '';
	scaleX = group.scaleX;
	scaleY = group.scaleY;
	left = group.left;
	top = group.top;
	console.log('t,l,sx,y: ' + top+' '+ left);
	tempScaleX = scaleX * newzoom;
	tempScaleY = scaleY * newzoom;
	tempLeft = left+ left*(1-newzoom)/2;
	tempTop = top+ top*(1-newzoom)/2;
	group.zoomX = tempScaleX;
	group.scaleY = tempScaleY;
	group.left = tempLeft;
	group.top = tempTop;
	group.setCoords();
	canvas.renderAll();
	canvas.calcOffset();
return