JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<script src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<h3>Canvas</h3>
<br/>
<canvas height="70" width="220" id="canvas"></canvas>
<!--[if lt IE 9]><script type="text/javascript" src="http://flashcanvas.net/bin/flashcanvas.js"></script><![endif]-->
<br/><br/>
<h3>HTML</h3>
<br/>
<div><a>Button Text</a></div>

CSS

body {
    background: rgba(0, 0, 50, 0.2);
    margin: 20px;
    font-family: Helvetica, Arial sans-serif;
    color: #000;
}

canvas {
    border: 1px solid #fff;
}

div {
    padding: 0px;
    border: 1px solid #fff;
    height: 70px;
    width: 220px;
}

a {
    font-family: sans-serif;
    background: -webkit-linear-gradient(top, rgb(150, 40, 20), rgb(124, 14, 0));
    background: -moz-linear-gradient(top, rgb(150, 40, 20), rgb(124, 14, 0));
    background: linear-gradient(top, rgb(150, 40, 20), rgb(124, 14, 0));
    box-shadow: inset 0px 1px rgb(220, 80, 40);
    display: block;
    margin: 8px;
    color: #fff;
    font-size: 24px;
    line-height: 40px;
    overflow: hidden;
    font-weight: 600;
    height: 32px;
    border: 1px solid rgb(90, 10, 0);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-size: 24px;
    line-height: 34px;
    text-shadow: 0px -1px rgb(30, 10, 0);
}

JavaScript

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

ctx = canvas.getContext('2d');
ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.lineCap = "round";
ctx.lineWidth = 20;

for (i = 0; i < 32; i++) {
     r = 90;// - parseInt(i * 0.8, 10);
     g = 10;// - parseInt(i * 0.8, 10);
     b = 0;// - parseInt(i * 0.8, 10);
     ctx.beginPath();
     ctx.strokeStyle='rgb('+ r + ', ' + g + ', ' + b + ')';
     ctx.moveTo(19, i + 19);
     ctx.lineTo(201, i + 19); 
     ctx.stroke();
     ctx.closePath();
}


for (i = 0; i < 30; i++) {
     r = 150 - parseInt(i * 0.84, 10);
     g = 40 - parseInt(i * 0.84, 10);
     b = 20 - parseInt(i * 0.84, 10);
     if (i === 0) {
         r = 220; g = 80; b = 40;
     }        
     ctx.beginPath();
     ctx.strokeStyle='rgb('+ r + ', ' + g + ', ' + b + ')';
     ctx.moveTo(20, i + 20);
     ctx.lineTo(200, i + 20); 
     ctx.stroke();
     ctx.closePath();
}

ctx.font = "bold 24px Helvetica, Arial, sans-serif";
ctx.fillStyle = "rgb(30, 10, 0)";
ctx.fillText("Button Text", 43, 42);
ctx.fillStyle = "#fff";
ctx.fillText("Button Text", 43, 43);