JSFiddle - React, Tailwind, and code Playground

by digitalicarus

HTML

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="left">
            <textarea></textarea>
        </div>       
        <div id="right">                
            <canvas></canvas>
        </div>    
    </body>
</html>

CSS

#left {
    display: block;
    width: 30%;
    height: 100%;
    float: left;
}
textarea {
    width: 100%;
    height: 100%;
}
#right {
    display: block;
    width: 70%;
    height: 100%;
    float: right;
}

JavaScript

var canvas = $('canvas')[0];
canvas.width = $('#right').width();
canvas.height = $('#right').height();
var ctx = canvas.getContext('2d');

$('textarea').keypress(function(e){
    if(e.which != 13 && e.which != 58) { return; }
    var ta = e.currentTarget;        
    var lines = ta.value.split('\n');
    console.log(e);
});

var render = function() {
    var grd = ctx.createLinearGradient(25,0,55,0);
    grd.addColorStop(0.3,"red");
    grd.addColorStop(0.7,"green");
    roundRect(ctx,{
        x:20, y:20, w:40, h:40, r:5, stroke:1
    });
    roundRect(ctx,{
        x:25,y:25,w:30,h:30,r:5,fill:1,fillStyle:grd
    });
};

$(window).resize(function(e) { canvas.height = $('#right').height(); render();} );

var roundedRect = function(ctx,x,y,w,h,r) {
    ctx.save();
    r = (r*2<w && r*2<h) ? r : (w<h) ? w/2 : h/2;
    ctx.beginPath();
    // top left corner
    ctx.arc(x+r,y+r,r,-Math.PI,-Math.PI/2,false);
    ctx.lineTo(x+w-r,y);
    // top right corner
    ctx.arc(x+w-r,y+r,r,-Math.PI/2,0,false);
    ctx.lineTo(x+w,y+h-r);
    // bottom right corner
    ctx.arc(x+w-r,y+h-r,r,0,Math.PI/2,false);
    ctx.lineTo(x+r,y+h);
    // bottom left corner
    ctx.arc(x+r,y+h-r,r,Math.PI/2,Math.PI,false);
    ctx.lineTo(x,y+r);
    ctx.stroke();
    ctx.restore();
};

var roundRect = function(ctx,o) {
    if(!ctx || !o.x || !o.y || !o.w || !o.h || !o.r) {
        return;            
    }

    var x = o.x,
        y = o.y,
        w = o.w,
        h = o.h,
        r = o.r,
        s = o.stroke,
        f = o.fill;
        
    ctx.save();
    r = (r*2<w && r*2<h) ? r : (w<h) ? w/2 : h/2;    

    ctx.beginPath();
    ctx.moveTo(x+r,y);
    // top and top right
    ctx.arcTo(x+w,y,x+w,y+h-r,r);   
    // bottom right and bottom
    ctx.arcTo(x+w,y+h,x+r,y+h,r);
    // bottom left corner and left
    ctx.arcTo(x,y+h,x,y+r,r);
    // top left corner
    ctx.arcTo(x,y,x+r,y,r);
    
    if(s) { ctx.stroke(); }
    if(f) { 
        if(o.fillStyle){ctx.fillStyle = o.fillStyle;} 
...