JSFiddle - React, Tailwind, and code Playground

by Caleb Evans

HTML

<script src="https://raw.github.com/caleb531/jcanvas/master/jcanvas.min.js"></script>
<canvas width='400' height='400'></canvas>

CSS

canvas {
    
}

JavaScript

// Bind callback functions to both layers
$("canvas").jCanvas({
  mousedown: function(layer) {
    layer.strokeStyle = '#000';
    layer.strokeWidth = 3;
  },
  mouseup: function(layer) {
    layer.strokeStyle = 'transparent';
  }
})
// Pressing on a shape will stroke it
.drawArc({
  layer: true,
  fillStyle: "#36b",
  x: 150, y: 150,
  radius: 50,
})
.drawRect({
  layer: true,
  fillStyle: "#6c1",
  x: 100, y: 100,
  width: 100, height: 100,
});