JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>
<canvas id="mycanvas"
  width="600" height="400">
    
  </canvas>

JavaScript

var mx = 300, my = 200;
var databtn = [{
  text: "Play",
  top: my-25,
  left: mx-50,
  width: 100,
  height: 50,
  output: "btn1"
  }, {
  text: "Stop",
  top: my+50,
  left: mx-50,
  width: 100,
  height: 50,
  output: "btn2"
  }];
var cv = $("#mycanvas");
databtn.forEach(function(item) {
  cv.drawText({
    layer: true,
    fillStyle: 'blue',
    strokeWidth: 2,
    x: item.left, y: item.top,
    fontSize: 30,
    fontFamily: 'Arial',
    text: item.text,
    fromCenter: true
}).drawRect({
    layer: true,
    strokeStyle: '#000',
    x: item.left, y: item.top,
    width: item.width,
    height: item.height,
    fromCenter: true,
    click: function(layer) {
      alert(item.output);
    }
  });
});