JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

JavaScript

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

canvas.style.border = 'inset #aaa';
canvas.style.cursor = 'text';
document.body.appendChild(canvas);
canvas.width = 300;
canvas.height = 20;
canvas.updateSize = function () {} //TODO
canvas.startEvents = function () {
    this.addEventListener('keydown', this.keydownFunction);
    this.addEventListener('keypress', this.keypressFunction);
    this.addEventListener('keyup', this.keyupFunction);
    this.addEventListener('mousedown', this.mousedownFunction);
    this.addEventListener('click', this.mousedownFunction);
    /*        this needs to be within mouse down and removed on mouse up
    this.addEventListener('mousemove',this.mousemoveFunction);
    this.addEventListener('mouseup',this.mouseupFunciton);
    
*/
};
canvas.text = 'Test';
canvas.selectStart = 0;
canvas.selectEnd = 0;
var f = ctx.font.split(' ');
f[0] = "16px";

ctx.font = f.join(' ');
canvas.caretVisible = false;
var bottom = parseFloat(ctx.font.split(' ')[0]) - 1;
var left = 2;
canvas.hideCaret = function (e) {
    console.log('hide caret');
    ctx.gco = ctx.globalCompositeOperation;
    ctx.globalCompositeOperation = "destination-out";
    ctx.fillText('|', e, bottom);
    ctx.globalCompositeOperation = ctx.gco;
};
canvas.showCaret = function (e) {


    console.log('show caret : ', ctx.measureText('|'));
    ctx.fillText('|', e, bottom);
    setTimeout(canvas.hideCaret(e), 500);
    setTimeout(canvas.showCaret(e), 1000);
};
canvas.measureAll = function () {
    var a = '';
    canvas.textArray = canvas.text.split('').map(function (e) {
        ctx.measureText(a += e);
    });
};
canvas.addEventListener('click', function (e) {
    canvas.measureAll();
    var _x = left - 1;
    canvas.textArray.every(function (f) {
        if (e < f) { _x = f;
                    return true;
                   }
        else return false;
    });
    canvas.showCaret(_x);
});
requestAnimationFrame(function anim() {
   ...