JSFiddle - React, Tailwind, and code Playground

JavaScript

/* -------- star Crazy --------- */
function Crazy(width, height) {
    "use strict";
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext("2d");
    
    this.canvas.width = width;
    this.canvas.height = height;
    this.canvas.style.display = "block";
    this.canvas.style.backgroundColor = "#f6f6f6";
    
    document.body.appendChild(this.canvas);
}

// The Labratory
Crazy.prototype.Point = function (x, y) {
    "use strict";
    var ctx = this.ctx;
    ctx.beginPath();
    ctx.arc(x, y, 2, 0, Math.PI * 2, false);
    ctx.fill();
};

Crazy.prototype.Line = function (p1, p2) {
    "use strict";
    var ctx = this.ctx;
    ctx.beginPath();
    ctx.moveTo(p2.x, p2.y);
    ctx.lineTo(p1.x, p1.y);
    ctx.stroke();
};

/* add class to Crazy */
Crazy.prototype.myClass = function (x, y) {
    "use strict";
    this.x = x;
    this.y = y;
};
/* -------- end Crazy --------- */


/* ----- test ------ */

/*global Crazy*/
var C1 = new Crazy(500, 500);
var C2 = new Crazy(500, 500);
var myClass = new C1.myClass(5, 10);

C1.Line({x: 50, y: 30}, {x: 400, y: 90});
C1.Point(100, 30);

C2.Line({x: 0, y: 250}, {x: 250, y: 0});
C2.Point(300, 300);

var p = document.createElement("p");
p.innerHTML = "myClass:<hr>x: " + myClass.x + ", y: " + myClass.y;
p.style.border = "solid 1px #999";
p.style.padding = "10px 0";
p.style.textAlign = "center";
document.body.appendChild(p);