JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<script type="text/javascript">
// Copyright 2006 Google Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.


// Known Issues:
//
// * Patterns only support repeat.
// * Radial gradient are not implemented. The VML version of these look very
//   different from the canvas one.
// * Clipping paths are not implemented.
// * Coordsize. The width and height attribute have higher priority than the
//   width and height style values which isn't correct.
// * Painting mode isn't implemented.
// * Canvas width/height should is using content-box by default. IE in
//   Quirks mode will draw the canvas using border-box. Either change your
//   doctype to HTML5
//   (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
//   or use Box Sizing Behavior from WebFX
//   (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
// * Non uniform scaling does not correctly scale strokes.
// * Optimize. There is always room for speed improvements.

// Only add this code if we do not already have a canvas implementation
if (!document.createElement('canvas').getContext) {

(function() {

  // alias some functions to make (compiled) code shorter
  var m = Math;
  var mr = m.round;
  var ms = m.sin;
  var mc = m.cos;
  var abs = m.abs;
  var sqrt = m.sqrt;

  // this is used for sub pixel precision
  var Z = 10;
  var Z2 = Z / 2;

  var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];

  /**
   * This funtion is assigned to the <canvas> elements as...

CSS

#canvas{
    border : 3px solid blue;
}

.btn{
    line-height : 100px;
    height : 100px;
    text-align : center;
    background-color : rgb(20,20,250);
    background-color : rgba(20,20,250,0.5);
    text-transform : capitalize;
    color : red;
    font-size : 40px;
    cursor : pointer;
}
.btn:hover,
.btn:active{
    background-color : #f90;
    background-color : rgba(255,180,0,0.5);
    color : #000;
}

JavaScript

var app = app || {};
app.dom = {
    canvas : $('#canvas')
};
app.DEV = true;
app.log = function(){
    if(app.DEV !== true)
        return;
    if(!('console' in window) ||!('log' in console))
        alert(arguments[0]);
    else
        console.log('[APP]: ' + arguments[0]);
};
app.drawing = {
    ctx : app.dom.canvas.get(0).getContext('2d'),
    _styleOptions : [
        'lineWidth',
        'strokeStyle',
        'fillStyle'
    ],
    _setStyle : function(o){
        for(var i=0,l=app.drawing._styleOptions.length;i<l;i++)
            if(app.drawing._styleOptions[i] in o && app.drawing._styleOptions[i] in app.drawing.ctx)
                app.drawing.ctx[app.drawing._styleOptions[i]] = o[app.drawing._styleOptions[i]];
    },
    drawLine : function(x1,y1,x2,y2,lineWidth,color){
        app.drawing.ctx.beginPath();
        app.drawing._setStyle({
            lineWidth : lineWidth,
            strokeStyle : color
        });
        app.drawing.ctx.moveTo(x1,y1);
        app.drawing.ctx.lineTo(x2,y2);     
        app.drawing.ctx.stroke();
    },
    drawCircle : function(x,y,r,color,fillColor){
        app.drawing.ctx.beginPath();
        app.drawing._setStyle({
            fillStyle : fillColor,
            strokeStyle : color
        });
        app.drawing.ctx.arc(x,y,r,0,Math.PI*2);
        app.drawing.ctx.stroke();
        if(fillColor)
             app.drawing.ctx.fill();
    },
    _convertPoint : function(x,y){
        var o = app.dom.canvas.offset();
        return {
            x : x - o.left,
            y : y - o.top
        };
    },
    clear : function(){
        app.dom.canvas.attr('width',app.dom.canvas.attr('width'));
    }
};
app.flags = {
    candraw : false
};
app.events = {
    mousedown : function(e){
        app.flags.candraw = true;
        app.latestPoint = app.drawing._convertPoint(e.pageX,e.pageY);
        app.log('mousedown');
    },
    mouseup : function(e){
        app.flags.candraw = false;
        app.latestPoint = null;
     ...