JSFiddle - React, Tailwind, and code Playground

by Kathleen Tuite

HTML

<script src="https://bgrins.github.io/spectrum/spectrum.js"></script>
<link rel="stylesheet" href="https://bgrins.github.io/spectrum/spectrum.css">
<script src="https://cdn.firebase.com/js/client/2.3.1/firebase.js"></script>
<table>
    <tr>
        <td>
            <canvas id="myCanvas" width="320" height="320"></canvas>
        </td>
        <td>
            <input type='text' id="colorPicker" />
        </td>
    </tr>
</table>

CSS

#myCanvas {
    border: 1px solid black;
    background-color: black;
}
#pixelDump {
    border: 1px solid gray;
    overflow: auto;
}

JavaScript

var scale = 40;
var num_pixels = 64;
var pixels = new Array(num_pixels * 3);
var r = 255;
var g = 0;
var b = 0;

var base = new Firebase("crackling-inferno-573.firebaseio.com","7XoQabjlnpSa9NjB2bPsALsJm0SEGAuo8AnFMKhF");

$("#colorPicker").spectrum({
    color: "#f00",
    change: function (color) {
        r = Math.round(color._r);
        g = Math.round(color._g);
        b = Math.round(color._b);
    }
});

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var is_drawing = false;

canvas.addEventListener('mousedown', function(event) {
    is_drawing = true;
    console.log("starting to draw");
});

canvas.addEventListener('mouseup', function(event) {
    getClick(event);
    is_drawing = false;
});

canvas.addEventListener('mouseout', function(event) {
    is_drawing = false;
});

canvas.addEventListener('mousemove', function (event) {
    if (is_drawing){
       getClick(event);
    }
}, false);

canvas.addEventListener('click', function (event) {
   getClick(event);
}, false);

function getClick(event){
     var x = Math.floor(event.clientX / scale - 0.5);
    var y = Math.floor(event.clientY / scale - 0.5);
    setPixelArray(x, y, r, g, b);
    sendToFirebase();
}

function remap(x) {
    return x;
    //return x*x/255;
    //return 16.0*Math.sqrt(x);
}

$("#save").click(sendToFirebase);
    
function sendToFirebase(){
    var pictureName = $("#pictureName").val()
    var rgbas = Array.from(pixels);
    var rgb555s = [];
    for (var i = 0; i < 64; i++) {
        var r = (remap(rgbas[3*i+0])|0);
        var g = (remap(rgbas[3*i+1])|0);
        var b = (remap(rgbas[3*i+2])|0);
        var res = (((r>>3)&0x1F)<<10) | (((g>>3)&0x1F)<<5) | ((b>>3)&0x1F);
        rgb555s.push(res);
    }
    base.child("/user_bitmaps/fiddle").set(rgb555s);
}

// initialize pixels to black
for (var i = 0; i < num_pixels; i++) {
    pixels[i * 3 + 0] = 0;
    pixels[i * 3 + 1] = 0;
    pixels[i * 3 + 2] = 0;
}

function setPixelArray(x, y, r, g,...