JSFiddle - React, Tailwind, and code Playground

by Caleb Evans

HTML

<script src="http://f.cl.ly/items/2m412I1j3g3H3k0E3O0n/jcanvas-handles.js"></script>
<canvas width='400' height='400'></canvas>

JavaScript

(function($) {
$(document).ready(function() {

// Cache canvas and grid properties
var $canvas = $('canvas');
var canvasW = $canvas.width();
var canvasH = $canvas.height();

$canvas.drawRect({
	layer: true,
	draggable: true,
	name: 'box',
	strokeStyle: '#c33',
	strokeWidth: 4,
	x: 200, y: 150,
	width: 150, height: 80,
	handle: {
		type: 'arc',
		fillStyle: '#9cf',
		strokeStyle: '#000',
		strokeWidth: 2,
		radius: 10
	},
	resizeFromCenter: false,
	dblclick: function(layer) {
		$canvas.animateLayer(layer, {
			scale: 2
		}, 500);
	}
});

var box = $canvas.getLayer('box');

});
}(jQuery));