JSFiddle - React, Tailwind, and code Playground

by giodamelio

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js"></script>
<div>
    <button id="go">Go</button>
    <button id="reset">Reset</button>
</div>
<canvas id="canvas" width="300" height="300"></canvas>
<div id="log" class="border"></div>

CSS

.canvas-container {
    display: inline-block !important;
}
#log {
    display: inline-block;
    width: 200px;
    height: 300px;
    overflow-y: scroll;
}
.border {
    border: 1px grey solid;
}

CoffeeScript

canvas = new fabric.Canvas "canvas",
    backgroundColor: "lightblue"

rect = new fabric.Rect
  left: 100
  top: 100
  fill: 'red'
  width: 25
  height: 25

canvas.add rect

rect.on "move", (e) ->
    console.log "Move"
    $("#log").text("Move\n" + @text())

rect.selectable = false

$("#go").click ->
    rect.animate "top", 50
    rect.animate "left", 50
    rect.animate "width", 50
    rect.animate "height", 50
    rect.animate "angle", 45

$("#reset").click ->
    rect.animate "left", 100
    rect.animate "top", 100
    rect.animate "width", 25
    rect.animate "height", 25
    rect.animate "angle", 0
    
done = false
animate = ->
    canvas.renderAll()
    requestAnimationFrame animate unless done
requestAnimationFrame animate