JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = $('canvas').get(0),
    ctx = canvas.getContext('2d'),
    pi = Math.PI,
    grad
;

ctx = canvas.getContext('2d');


ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.strokeStyle='rgb(0, 108, 0)';
ctx.lineWidth = 2;
ctx.arc(30,30,30,pi/2,3*pi/2,false);
ctx.stroke();
ctx.strokeRect(30,0,160,60);
ctx.beginPath();
ctx.arc(190,30,30,3*pi/2,pi/2,false);
ctx.stroke();


ctx.beginPath();
ctx.fillStyle = 'rgb(0, 128, 0)';
ctx.arc(30, 30, 30, pi / 2, 3 * pi / 2, false);
ctx.fill();
ctx.fillRect(30, 0, 160, 60);
ctx.beginPath();
ctx.arc(190, 30, 30, 3 * pi / 2, pi / 2, false);
ctx.fill();

grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
grad.addColorStop(0.0, 'rgba(0, 0, 0, 1)');
grad.addColorStop(0.5, 'rgba(0, 0, 0, 0)');
grad.addColorStop(1.0, 'rgba(0, 0, 0, 1)');
ctx.fillStyle = grad;

grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
grad.addColorStop(0.0, 'rgba(255, 255, 255, 0.5)');
grad.addColorStop(1.0, 'rgba(255, 255, 255, 0.0)');
ctx.fillStyle = grad;
ctx.beginPath();
ctx.arc(30, 30, 30, pi / 2, 3 * pi / 2, false);
ctx.lineTo(190, 0);
ctx.arc(190, 30, 30, 3 * pi / 2, pi / 2, false);
ctx.lineTo(30, 60);
ctx.fill();

ctx.font = "bold 30px sans-serif";
ctx.fillStyle = "rgb(0, 108, 0)";
ctx.fillText("Button Text", 27, 39);
ctx.fillStyle = "#fff";
ctx.fillText("Button Text", 27, 40);