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)
  dot.on 'selected', ->
    console.log('centering dot at: ', dot.left, dot.top)
    canvas.setZoom(1)
    vpw = canvas.width / zoom
    vph = canvas.height / zoom
    x = (dot.left - vpw / 2)
    y = (dot.top - vph / 2)
    canvas.absolutePan({x:x, y:y})
    console.log('panning to ', x, y)
    canvas.setZoom(zoom)
    return
  return

i = 1
while i < 4
  addDot(i)
  i++
group = new fabric.Group(dots,{
top: 0,
left: 0
});
canvas.add(group)
console.log(canvas.getObjects());
group.on 'selected', ->
    canvas.setZoom(1)
    vpw = canvas.width / zoom
    vph = canvas.height / zoom
    x = (group.left - vpw / 2)
    y = (group.top - vph / 2)
    canvas.absolutePan({x:x, y:y})
    console.log('panning to ', x, y)
    canvas.setZoom(zoom)
    return
  return