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="150" width="400" 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/>
<style type="text/css" id="button-style"></style>
<div><a></a></div>

CSS

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

canvas, div {
    padding: 0px;
    border: 1px solid #fff;
    height: 150px;
    width: 400px;
}

JavaScript

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

//settings
var text = 'Buy Me';
var backgroundColor = { r: 40, g: 150, b: 20 };


var backgroundGradientAmmount = 0.75;
var backgroundColorTop = 'rgb(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ')';
var backgroundColorBot = 'rgb(' + parseInt(backgroundColor.r * backgroundGradientAmmount, 10)  + ',' + parseInt(backgroundColor.g * backgroundGradientAmmount, 10) + ',' + parseInt(backgroundColor.b * backgroundGradientAmmount, 10) + ')';

var boxShadow = { r: parseInt(backgroundColor.r * 1.5, 10), g: parseInt(backgroundColor.g * 1.5, 10), b: parseInt(backgroundColor.b * 1.5, 10) };
var boxShadowCSS = 'rgb(' + boxShadow.r + ',' + boxShadow.g + ',' + boxShadow.b + ')';

//settings
css = {
    'display': 'inline-block',
    'font-family': 'Helvetica, Arial, sans-serif',
    'background': '-webkit-linear-gradient(top, ' + backgroundColorTop + ' , ' + backgroundColorBot + ' )',
    'box-shadow': 'inset 0px 1px ' + boxShadowCSS,
    'color': '#fff',
    'font-size': '34px',
    'overflow': 'hidden',
    'font-weight': 'bold',
    'height': '32px',
    'border': '2px solid rgb(10,90,0)',
    'padding': '20px',
    'border-radius': '10px',
    'text-align': 'center',
    'line-height': '29px',
    'text-shadow': '0px -1px rgb(10,30,0)',
    'width': '180px'
}

var style = 'a {'

$.each(css, function(l, r){
    style += l + ': ' + r + ';';
});

style += '}';
    
$('#button-style').html(style);  
$('a').text(text);

var borderRadius = parseInt(css['border-radius'], 10);
var height = parseInt(css['height'], 10);
var padding = parseInt(css['padding'], 10);
var borderWidth = parseInt(css['border'].split(' ')[0], 10);
var borderColor = css['border'].split(' ')[2];

var textShadowColor = css['text-shadow'].split(' ')[2];
var textShadowLeft = parseInt(css['text-shadow'].split(' ')[0], 10);
var textShadowTop =...