JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://f.cl.ly/items/0d091K3G3b3n1e3U3s3x/jcanvas.min.js"></script>
<h1>jCanvas Events</h1>

<canvas width='300' height='300'></canvas>

CSS

canvas {
 border: solid 1px #eee;   
}

JavaScript

$(document).ready(function() {

// Cache elements
var $canvas = $('canvas');
var $h1 = $('h1');

// Alert the user when they don't click either shape on the canvas
$canvas.on('mousedown', function() {
    $h1.html('You pushed nothing.');
});

// Red rectangle
$canvas.addLayer({
  method: 'drawLine',
  fillStyle: '#c33',
  x1: 200, y1: 200,
  x2: 100, y2: 200,
  x3: 50, y3: 50,
  closed: true,
  radius: 100,
  // Event bindings
  mousedown: function(params) {
          $h1.html('You pushed RED!');
          params.fillStyle = '#333';
  },
  mouseup: function(params) {
          params.fillStyle = '#c33';
  },
})

// Blue rectangle
$canvas.addLayer({
    method: 'drawRect',
    fillStyle: '#36a',
    x: 200, y: 100,
    width: 100, height: 50,
    radius: 50,
    // Event bindings
    mousedown: function(params) {
        $h1.html('You pushed BLUE!');
    },
})
.drawLayers();

});