JSFiddle - React, Tailwind, and code Playground

by Caleb Evans

HTML

<script src="https://raw.github.com/caleb531/jcanvas/master/jcanvas.min.js"></script>
<h1>jCanvas Events</h1>

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

CSS

canvas {
 border: solid 2px #eee;
}

JavaScript

// 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: 'drawPolygon',
  fillStyle: '#c33',
  x: 100, y: 200,
  sides: 5,
  projection: -0.5,
  radius: 70,
  // 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,
    // Event bindings
    mousedown: function(params) {
        $h1.html('You pushed BLUE!');
        $(this).animateLayer(1, {
            angle: '+=360'
        })
    },
});