Creé un ciclo de animación que funciona bien, pero cuando creé una función para dibujar un rectángulo, no aparece nada. No me da error pero no aparece el rectángulo. Hice console.log("hello") al final de la función rect para asegurarme de que funciona, y "hello" aparece en la consola, así que en este punto, no sé qué está mal. Cualquier ayuda sería muy apreciada.

Aquí está mi código completo:

 ///// 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 = ox; var y = oy; var a = o.angle; ctx.beginPath(); ctx.moveTo(ox,oy); for ( var i=0; i<300; i++){ angle(o, 10); forward(o,2+i*10); ctx.lineTo(ox, oy); ctx.stroke(); } ox = x; oy = 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); ox += cX; oy += cY; } function rect(o){ ctx.beginPath(); ctx.moveTo(ox , oy); ctx.lineTo(o.x+ow, oy); ctx.lineTo(o.x+ow, o.y+oh); ctx.lineTo(ox, o.y+oh); ctx.lineTo(ox, oy); 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");