I've created an animation loop that works fine, but when I created a function to draw a rectangle, nothing shows up. I don't get an error but the rectangle doesn't appear. I did console.log("hello") at the end of the rect function to make sure it works, and "hello" does appear in console, so at this point, I don't know what's wrong. Any help would be greatly appreciated.

Here's my complete code:

///// VARIABLES 

var canvas;
var ctx;
var w = 1000;
var h = 600; 

///// EXECUTABLE CODE 

setUpCanvas();


var o1 = {
    "x": w/3,
    "y": h/3,
    "w": 20,
    "h": 20,
    "c": 180,
    "a": 0.5,
    "angle": 0,
    "changle": 30,
    "distance": 50,

}

var o2 = {
    "x": w/3,
    "y": h/3,
    "c": 280,
    "a": 0.5,
    "w": 0,
    "h": 30, 
}


var oneDegree = 2*Math.PI/360;



setUpCanvas();



animationLoop();

rect(o2);

function animationLoop(){
    clear();
    shape(o1);
    angle(o1,2);
    forward(o1,10);

    requestAnimationFrame(animationLoop);
}

function clear(){
    ctx.clearRect(0,0,w,h);
}


function shape(o){
    var x = o.x;
    var y = o.y;
    var a = o.angle;
    ctx.beginPath();
    ctx.moveTo(o.x,o.y);
    for ( var i=0; i<300; i++){
        angle(o, 10);
        forward(o,2+i*10);
        ctx.lineTo(o.x, o.y);
        ctx.stroke();
    }
    o.x = x;
    o.y = y;
    o.angle = a;
}


function angle(o,a){ 
    // console.log(a);
    if( a == undefined){
        o.angle += o.changle;
    }else{
    o.angle += a;
    }
}


function forward(o,d){
    var cX;
    var cY;

    if(d != undefined){
        o.distance= d;    
    };
        cX = o.distance*Math.cos(o.angle*oneDegree*5);
        cY = o.distance*Math.sin(o.angle*oneDegree*5);
        o.x += cX;
        o.y += cY;
    
}


function rect(o){
    ctx.beginPath();
    ctx.moveTo(o.x , o.y);
    ctx.lineTo(o.x+o.w, o.y);
    ctx.lineTo(o.x+o.w, o.y+o.h);
    ctx.lineTo(o.x, o.y+o.h);
    ctx.lineTo(o.x, o.y);
    ctx.fillStyle = "hsla("+o.c+", 100%, 50%, "+o.a+")";
    ctx.fill();
   
}

//GENERAL STUFF
function randn(r){
    var result = Math.random()*r - r/2;
    return result;
}

function randi(r){
    var result = Math.floor(Math.random()*r);
    return result 
}

function rand(r){
    var result = Math.random()*r;
    return result
}

function setUpCanvas(){
    canvas = document.querySelector("#myCanvas");
    ctx = canvas.getContext("2d");
    canvas.width = w;
    canvas.height = h;
    canvas.style.border="2px solid black";
}

console.log("Assignment 2");