JSFiddle - React, Tailwind, and code Playground

by Zevan

JavaScript

//alert("hui");


function ZCanvas(canvasID) {
    this.canvas = document.getElementById(canvasID);
    this.context = canvas.getContext("2d");

    function inherit(subClass, superClass) {
        subClass.prototype = new superClass();
        subClass.prototype.constructor = subClass;
    }

    var out = document.getElementById("output");

    var mouseX = 0,
        mouseY = 0;
    var mousePressed = false;

    canvas.addEventListener("mousemove", function(e) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
        out.innerHTML = mouseX + " / " + mouseY;
    }, false);

    document.addEventListener("mousedown", function() {
        mousePressed = true;
    }, false);
    document.addEventListener("mouseup", function() {
        mousePressed = false;
    }, false);

    function Shape() {
        this.x = 0;
        this.y = 0;
        this.width = 0;
        this.height = 0;
        this.left = 0;
        this.right = 0;
        this.top = 0;
        this.bottom = 0;

        var that = this;

        this.updateSides = function() {
            that.left = this.x;
            that.top = this.y;
            that.right = this.x + that.width;
            that.bottom = this.y + that.height;
        }

        this.clickEvents = [];
        this.overEvents = [];
        this.outEvents = [];

        this.click = function(callback) {
            clickEvents.push(callback);
        }
        this.mouseover = function(callback) {
            overEvents.push(callback);
        }
        this.mouseout = function(callback) {
            outEvents.push(callback);
        }

    }

    function Rect(x, y, w, h) {
        this.x = x;
        this.y = y;
        this.width = w;
        this.height = h;

        var that = this;

        var overTime = 0;

        this.updateSides();

        this.update = function() {
            this.updateSides();

            if (mouseX > that.left && mouseX < that.right && mouseY > that.top && mouseY < that.bottom) {
       ...