JSFiddle - React, Tailwind, and code Playground

by Hakan Bilgin

HTML

<canvas id="counter" width="500" height="500"></canvas>

<h2> Bezier PlayGround </h2> 
I modified and grabbed this code from <a
href="http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html"> Canvas BĂ©zier Curve Example </a>
with the source <a href="http://blogs.sitepointstatic.com/examples/tech/canvas-curves/curves.js">curves.js</a> 
<h2>Disclaimer</h2>
<p>The original code was developed by <a href="http://twitter.com/craigbuckler">Craig Buckler</a> of <a href="http://optimalworks.net/">OptimalWorks.net</a> for <a href="http://sitepoint.com/">SitePoint.com</a>.</p>

<p>This code can be used without any restrictions but please don't expect 24/7 support! A link back to SitePoint.com is appreciated.</p>

<canvas id="canvas" width="500" height="500"></canvas>
<script>
    /* 
 * Canvas curves example
 *
 * By Craig Buckler,        http://twitter.com/craigbuckler
 * of OptimalWorks.net        http://optimalworks.net/
 * for SitePoint.com        http://sitepoint.com/
 * 
 * Refer to:
 * http://blogs.sitepoint.com/html5-canvas-draw-quadratic-curves/
 * http://blogs.sitepoint.com/html5-canvas-draw-bezier-curves/
 *
 * This code can be used without restriction. 
 */

(function() {

    var canvas, ctx, code, point, style, drag = null, dPoint;

    // define initial points
    function Init(quadratic) {

        point = {
            p1: { x:100, y:250 },
            p2: { x:400, y:250 }
        };
        
        if (quadratic) {
            point.cp1 = { x: 250, y: 100 };
        }
        else {
            point.cp1 = { x: 150, y: 100 };
            point.cp2 = { x: 350, y: 100 };
        }
        
        // default styles
        style = {
            curve:    { width: 6, color: "#333" },
            cpline:    { width: 1, color: "#C00" },
            point: { radius: 10, width: 2, color: "#900", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * Math.PI }
        }
        
        // line style defaults
        ctx.lineCap = "round";
     ...

CSS

canvas {
    display: block;border:1px solid black;
}
h1
{
    font-size: 1.6em;
    font-weight: normal;
    margin: 0 0 0.3em 0;
}

h2
{
    font-size: 1.4em;
    font-weight: normal;
    margin: 1.5em 0 0 0;
}

JavaScript

var xStart,
    xEnd,
    yStart,
    yEnd,
    paint,
    ctx;
$(document).ready(function (){
    
    if (typeof FlashCanvas != "undefined") {
        FlashCanvas.initElement($('canvas')[0]);
    }
    ctx = $('canvas')[0].getContext("2d");
    ctx.strokeStyle = '#000';
    ctx.lineJoin="round";
    ctx.lineCap="round";
    ctx.lineWidth = 1;
    
    
$('canvas').bind('mousedown mousemove mouseup mouseleave touchstart touchmove touchend', function(e){
            var orig = e.originalEvent;
            
            if(e.type == 'mousedown'){
                e.preventDefault(); e.stopPropagation();
    
                 xStart = e.clientX - $(this).offset().left;
                  yStart = e.clientY - $(this).offset().top;
                  xEnd = xStart;
                  yEnd = yStart;
                
                paint = true;
                draw(e.type);
            
            }else if(e.type == 'mousemove'){
                if(paint==true){
                    xEnd = e.clientX - $(this).offset().left;
                      yEnd = e.clientY - $(this).offset().top;

       
                   // lineThickness = 5 - Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/10;
                   // if(lineThickness < 1){
                   //     lineThickness = 1;   
                   // }
                    
                   lineThickness = 1 + Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/5;
                   
                   
                   
                   if(lineThickness > 10){
                        lineThickness = 10;   
                    }
                    
                    ctx.lineWidth = lineThickness;
                    draw(e.type);
                }
            }else if(e.type == 'mouseup'){
                paint = false;
            }else if(e.type == 'mouseleave'){
                paint = false;
            }else if(e.type == 'touchstart'){
               ...