JSFiddle - React, Tailwind, and code Playground

by youtag

HTML

<div id="below"></div>
<div id="copy">MeMo BY <a href="http://youtag.lu/">YOUTAG</a> 2014</div>
<canvas id="buffer">
    <canvas id="paper"></canvas>
</canvas>
<div id="controls">
    <form class="rangeslider" id="cform" enctype="multipart/form-data" method="post">
        <fieldset>Hue
            <input id="c-hue" type="range" step="3" value="200" min="0" max="360" />
        </fieldset>
        <fieldset>Saturation
            <input id="c-sat" type="range" step="1" value="30" max="100" />
        </fieldset>
        <fieldset>Lightness
            <input id="c-lit" type="range" step="1" value="50" max="100" />
        </fieldset>
        <fieldset>Stroke
            <input id="c-stroke" type="range" step="1" value="10" min="1" max="100" />
        </fieldset>
        <fieldset>Opacity
            <input id="c-opa" type="range" step="1" value="100" min="1" max="100" />
        </fieldset>
        <fieldset>Save Image
            <br> <a id="downloadLnk" class="button">Save image to device</a>

            <br>
            <br>Use as Background
            <br>
            <input type="file" accept="image/*" id="camera" name="camera" capture="camera" />
        </fieldset>
    </form>
    <div id="grabme">+</div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    overflow:hidden;
    background: #eee;
}
#copy {
    position: absolute;
    right:10px;
    bottom:10px;
    height: 20px;
    text-align: right;
    color: #aaa;
    font-family: Helvetica, Arial;
    font-weight: 200;
    text-align: right;
    font-size: 7px;
    letter-spacing:1px;
}
#paper {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:0;
}
#buffer {
    //position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    // background: url(img/linedpaper.png);
    // background-size: cover;
    // background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index:1;
}
#colorwheel {
    position:absolute;
    left:-1000px;
    top:-1000px;
    -webkit-transition: 0.5s;
}
a {
    color:999;
    text-decoration:none
}
//////////// CONTROLS //// #controls {
    position:absolute;
    display: block;
    -webkit-transition: opacity 0.5s;
}
#cform {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font: 100 15px/18px"Avenir";
    color:rgba(0, 0, 0, 0.5);
    background-color:rgb(255, 255, 255);
    width: 300px;
    margin:1em auto;
    padding: 10px;
    border-radius: 6px;
    //border: 2px solid #ddd;
    box-shadow:-15px -15px 80px rgba(0, 0, 0, 0.1);
    display: block;
}
#grabme {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    cursor: pointer;
    display: block;
    top: -15px;
    left: 0px;
    height: 40px;
    width: 40px;
    //padding: 10%;
    font-size: 220%;
    color: #ccc;
    line-height: 1.05;
    text-align:center;
    background-color:rgb(255, 255, 255);
    border-radius: 6px;
    // border: 2px solid #ddd;
    // box-shadow:2px -2px 8px rgba(0, 0, 0, 0.1);
}
fieldset {
    margin:0 auto;
    width:80%;
    padding:20px...

JavaScript

// --- Drawing Board ---//
var paper = document.querySelector("#paper");
var ctx0 = paper.getContext("2d");

var buffer = document.querySelector("#buffer");
var ctx1 = buffer.getContext("2d");

var centerX, centerY = 0;
var color1 = "#98A59B";
var color2 = "#333333";
var color3 = "#F1613F";
var stroke = 10 * window.devicePixelRatio;

// var brush =	document.getElementById("scream");
var log = document.getElementById("copy");

var lastX = new Array
var lastY = new Array
var color = new Array

var ongoingTouches = new Array
var bMouseUp = true;
var lineStarted = false


//ctx1.webkitImageSmoothingEnabled = true;
//ctx1.translate(0.5, 0.5);


// stroke variables 

var hue = 200
var lit = 50
var opa = 1
var sat = 30
var stk = 10 * window.devicePixelRatio


// control variables

var grabme = document.querySelector("#grabme")

var cform = document.querySelector("#cform")
cform.style.display = "block"

var controls = document.querySelector("#controls")
controls.style.left = "10px"
controls.style.top = "25px"
controls.style.position = "absolute"
controls.style.display = "block"

var controlsRect = controls.getBoundingClientRect()




/////// emulate input range on touch ///

var slider = document.querySelectorAll('input[type="range"]')
var startX=0
var startV=0

for (i = 0; i < slider.length; i++) {
    slider[i].addEventListener('touchstart', handleSlideStart, false);
    slider[i].addEventListener('touchmove', handleSlideMove, false);
}

function handleSlideStart(e) {
    
    e.preventDefault()
    
    startX = e.changedTouches[0].pageX
    startV = parseInt(e.target.value)
    //log.innerHTML = 'yes startV='+startV
}

function handleSlideMove(e) {
    
    e.preventDefault()
    
    if (startV != 0) {
        
        var delta = Math.round((e.changedTouches[0].pageX - startX) / 2)
        
        this.value = startV + delta * e.target.step
        //log.innerHTML = this.value + " = " + startV + ' + ' + delta +' x '+ e.target.step
    }
}






function...