JSFiddle - React, Tailwind, and code Playground

by John kuoppala

HTML

<canvas id="canvas"></canvas>

CSS

canvas {
    border: 1px solid grey;
}

JavaScript

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
    c.width = 50;
    c.height = 50;
var myObjects = new Array();

var negativeOffSetX = 0;
var negativeOffSetY = 0;

myObjects[0] = new object("rect",15,30,0,50,50);
myObjects[1] = new object("rect",45,10,0,50,75);
myObjects[2] = new object("circle",0,0,5,200,200);
myObjects[3] = new object("rect",50,20,0,-50,-80);

function object(oType,w,h,r,x,y) {
    this.oType = oType;
    this.w = w;
    this.h = h
    this.r = r;
    this.x = x;
    this.y = y;
}

function drawCircle(r,x,y) {
    ctx.beginPath();
    ctx.arc(x,y,r,0,2*Math.PI);
    ctx.stroke();
}

function drawRectangle(w,h,x,y) {
    //I want the x,y coordinates to be the center of the rect.  
    var edgeX = x-w/2;
    var edgeY = y-h/2;
    ctx.strokeRect(edgeX,edgeY,w,h);
}

function paint() {
    for (var i = 0; i<myObjects.length; i++) {
        var o = myObjects[i];
        if (o.oType == "rect") {
            drawRectangle(o.w,o.h,o.x+negativeOffSetX,o.y+negativeOffSetY);
        }
        else {
            drawCircle(o.r,o.x+negativeOffSetX,o.y+negativeOffSetY);    
        }
    }
    
    ctx.beginPath();
    ctx.arc(negativeOffSetX,negativeOffSetY,5,0,2*Math.PI);
    ctx.fillStyle="red";
    ctx.fill();
    ctx.fillStyle="black";
    ctx.fillText("(0,0)",negativeOffSetX,negativeOffSetY+15);
}


function adjustCanvasSize() {
    var maxWidth = c.width;
    var maxHeight = c.height;
    
    var minWidth = 0;
    var minHeight = 0;
    for (var i = 0; i<myObjects.length; i++) {
        var o = myObjects[i];
        if (o.oType == "rect") {
            if (o.x+o.w/2 > maxWidth) {
                maxWidth = o.x+o.w/2;
            }
            if (o.y+o.h/2 > maxHeight) {
                maxHeight = o.y+o.h/2;
            }
            
            if (o.x-o.w/2 < minWidth) {
                minWidth = o.x-o.w/2;
            }
            if (o.y-o.h/2 < minHeight) {
                minHeight = o.y-o.h/2;
            }
    ...