JSFiddle - React, Tailwind, and code Playground

by beewayne

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input id = "selectrectangle" type="button" value="select rectangle"/>
<input id = "selectsecond" type="button" value="select second object"/>
<input id = "selectall" type="button" value="select all objects"/>
<canvas id="canvas" width="400" height="400" style="border:1px solid red"/>

JavaScript

var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Rect({
    left: 100,
    top: 100,
    width: 75,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
  }));

 canvas.add(new fabric.Circle({
    left: 200,
    top: 200,
    radius: 30,
    fill: 'gray',
    stroke: 'black',
    strokeWidth: 3
  }));


$( "#selectrectangle" ).click(function() {
 canvas.setActiveObject(canvas.item(0));
});

$( "#selectsecond" ).click(function() {
 canvas.setActiveObject(canvas.item(1));
});

$( "#selectall" ).click(function() {
canvas.setActiveObject(canvas.item(0));
 canvas.setActiveObject(canvas.item(1));
});