JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span id=mybox1></span> Option 1<br>
    <span id=mybox2></span> Option 2<br>
    <span id=mybox3></span> Option 3<br>
    <hr>
    <p id=output></p>
    <hr>
    <p>
    Methods can be overridden without affecting the original:
    </p>
    <span id="modified"></span>
</div>

CSS

div{
  border:1px solid #ccc;
}

JavaScript

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */

    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offset){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offset, offset,
                this.width - offset * 2, this.height - offset * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0);
        this.draw_rect("#FFFFFF", 1);

        if(this.is_checked())
            this.draw_rect("#000000", 2);
    },

    is_checked: function(){
        return !!this.state;
    }
});

// Testing it...

var mycb = Checkbox.create({
    target: mybox1
});

var mycb2 = Checkbox.create({
    target: mybox2
});

var mycb3 = Checkbox.create({
    target: mybox3,
});

var interval =...