JSFiddle - React, Tailwind, and code Playground

by Caleb Evans

HTML

<script src="http://f.cl.ly/items/1p3A2i3J1q00313P3j3I/jcanvas.min.js"></script>
<canvas width='400' height='400'></canvas>

CSS

canvas {
 border: solid 1px #000;   
}

JavaScript

// Set variables
var text = "Hello, world!";
var color = "#9cf";
var delay = 100;

// Create text layer
$("canvas").addLayer({
  method: 'drawText',
  fillStyle: color,
  strokeStyle: "#000",
  strokeWidth: 2,
  x: 200, y: 150,
  text: text,
  font: "36pt Verdana, sans-serif",
  mouseover: function(layer) {
    layer.fillStyle = "#fff";
    layer.text = "Click here!";
  },
  mouseout: function(layer) {
    layer.fillStyle = color;
    layer.text = 'Hello, world!';
  },
  click: function(layer) {
    window.open('http://calebevans.me/');
  }
})