JSFiddle - React, Tailwind, and code Playground

by Caleb Evans

HTML

<script src="https://raw.github.com/caleb531/jcanvas/master/jcanvas.js"></script>
<label for='visible'>Box is visible?</label>
<input type='checkbox' id='visible' checked />
<br />
<canvas width='300' height='300'></canvas>

CSS

canvas {
 border: solid 2px #ccc;   
}

JavaScript

// Cache jQuery elements
var $canvas = $('canvas');
var $visible = $('#visible');

// Create a rectangle layer
$canvas.drawRect({
    layer: true,
    name: 'box',
    visible: $visible.prop('checked'),
    fillStyle: '#c33',
    x: 150, y: 150,
    width: 100, height: 100
});
// Draw a second layer for comparison
$canvas.drawArc({
    layer: true,
    name: 'circle',
    fillStyle: '#36c',
    x: 100, y: 100,
    radius: 50
});

// Get the rectangle layer
var box = $canvas.getLayer('box');

// Change box visibility and redraw when checkbox value is changed
$visible.on('change', function() {
    box.visible = $visible.prop('checked');
    $canvas.drawLayers();
});