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.6" value="360" min="0" max="360" onchange="hueSliderChange(this)" ontouchmove="hueSliderChange(this)" />
        </fieldset>
        <fieldset>Saturation
            <input id="c-sat" type="range" step="1" value="30" max="100" onchange="satSliderChange(this)" ontouchmove="satSliderChange(this)" />
        </fieldset>
        <fieldset>Lightness
            <input id="c-lit" type="range" step="1" value="50" max="100" onchange="litSliderChange(this)" ontouchmove="litSliderChange(this)" />
        </fieldset>
        <fieldset>Stroke
            <input id="c-stroke" type="range" step="1" value="50" max="100" onchange="strokeSliderChange(this)" ontouchmove="strokeSliderChange(this)" />
        </fieldset>
        <fieldset>Opacity
            <input id="c-alpha" type="range" step="1" value="100" max="100" onchange="opaSliderChange(this)" ontouchmove="opaSliderChange(this)" />
        </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="files" name="files[]" />
        </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;
    left:530px;
    top:130px;
    padding: 30px;
}
#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);
    transition: 0.5s;
    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%;
   ...

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;


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


/////// stroke variables 

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


var grabme = document.querySelector("#grabme")
var controls = document.querySelector("#controls")
var controlsRect = controls.getBoundingClientRect()


var lineStarted = false



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

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


var startX = 0
var startV = 0

    function handleSlideStart(e) {
        log.innerHTML = 'yes start'

        e.preventDefault()

        startX = e.changedTouches[0].pageX
        startV = this.value
    }

    function handleSlideMove(e) {

        e.preventDefault()

        if (startX != 0) {

            var delta = Math.round((e.changedTouches[0].pageX - startX) / 2)

            log.innerHTML = this.id + "|" + this.defaultValue + ' > ' + delta

            this.value = 50 + delta * this.step

            //log.innerHTML = this.value
            console.log(this.value, startV, delta)

        }
    }

    function handleSlideEnd(e) {

        e.preventDefault()

        //log.innerHTML = 'yes end'
        startX = 0
    }



    function...