JSFiddle - React, Tailwind, and code Playground

by Spencer Wasden

HTML

<canvas id="circles" style="position:absolute" width="800" height="600" style="background-color:#FFFFDD;"></canvas>

<canvas id="canvas" style="position:absolute" width="800" height="600" style=""></canvas>

JavaScript

var w = 800;
var h = 600;
var cx = w/2;
var cy = h/2;
var angle = 0;
var brake = 0;

var circles = document.getElementById("circles");
var cctx = circles.getContext("2d");

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

drawConcentrics();

var blue = {
    color: '#AAAAFF',
    w: 200,
    h: 80
};

var red = {
    color: '#FF0000',
    w: 240,
    h: 60
};

var ival = setInterval(update, 300);
    
function update(){
    //ctx.setTransform(1, 0, 0, 1, 0.5, 0.5);
    //ctx.restore();
    //ctx.moveTo(0,0);
    //ctx.clearRect(0, 0, w, h);
    
    

    console.log('angle: ' + angle); 

    ctx.rotate(-2*Math.PI/180);
    drawRect(blue, 0, 0);
    //drawRect(red, 24, 20);
    

}    

function bumpAngle(){
	angle+=2;
    if (angle < 0) angle = 359;
}

// draws a centered rect (with offsets)
function drawRect(rect, offX, offY){
    // reset
    //ctx.restore();
    //ctx.setTransform(1, 0, 0, 1, 0.5, 0.5);
    
	var x = cx - rect.w/2 + offX;
    var y = cy - rect.h/2 + offY;

    if (rect.color){
    	ctx.strokeStyle = rect.color;
    }
    	//ctx.translate(x,y);

    
	ctx.strokeRect(x, y, rect.w, rect.h);
    
}

function drawConcentrics(){
    cctx.strokeStyle="#666666";

    // draw circles
    for (r=3; r<300; r+=15){
        cctx.beginPath();
        cctx.arc(cx, cy, r, 0, 2*Math.PI);
        cctx.stroke();
    }
}




// rect
//ctx.strokeStyle="#FF0000";
//ctx.translate(cx-23-.5, cy+20-.5);
//ctx.strokeRect(0,0,199,70);
//ctx.rotate(-20*Math.PI/180);
//ctx.strokeRect(0,0,199,70);