JSFiddle - React, Tailwind, and code Playground

by evankennedy

JavaScript

var context = Object.getPrototypeOf(document.createElement('canvas').getContext('2d'));
    var canvas = Object.getPrototypeOf(document.createElement('canvas'));

    function bind(context, p) {
        var original = context[p];
        context[p] = function() {
            var h = context.history;
            if(h.write){
                h.data.splice(h.index, h.data.length - h.index, [original, arguments, this]);
                h.index++;
            }
            return original.apply(this, arguments);
        }
    }

    for (p in context) {
        if (context.hasOwnProperty(p)) {
            bind(context, p);
        }
    }
    context.redraw = function(){
        this.history.write = false;
        var context = this.history.data[0][2];
        context.clearRect(0,0,context.canvas.width,context.canvas.height);
        
        for (var i = 0; i < this.history.index; i++) {
            this.history.data[i][0].apply(context,this.history.data[i][1]);
        }
    }
    context.history = {
        index: 0,
        data: [],
        undo: function() {
            this.index--;
            context.redraw();
        },
        redo: function() {
            this.index++;
            context.redraw();
        },
        goto: function(index) {

        },
        add: function(title) {

        },
        write: true
    };