Tengo este archivo Html con doge doggo donde rebota en el borde cuando lo golpea (algo así como la pantalla de guardado de DVD) y quiero hacer que gire lentamente hasta el infinito, pero no sé dónde poner el guión porque en todas partes pongo el guión de rotación. toda la página se puso blanca.
let speed = 20; let scale = 0.10; // Image scale (I work on 1080p monitor) let canvas; let ctx; let doge = { x: 100, y: 200, xspeed: 5, yspeed: 5, img: new Image() }; (function main(){ canvas = document.getElementById("whole-screen"); ctx = canvas.getContext("2d"); doge.img.src = 'doge.png'; //Draw the Background canvas.width = window.innerWidth; canvas.height = window.innerHeight; update(); })(); function update() { setTimeout(() => { //Draw the canvas background ctx.fillStyle = '#69001c'; ctx.fillRect(0, 0, canvas.width, canvas.height); //Draw Doge and his background ctx.fillRect(doge.x, doge.y, doge.img.width*scale, doge.img.height*scale); ctx.drawImage(doge.img, doge.x, doge.y, doge.img.width*scale, doge.img.height*scale); //Move the logo doge.x+=doge.xspeed; doge.y+=doge.yspeed; //Check for collision checkHitBox(); update(); }, speed) } //Check for border collision function checkHitBox(){ if(doge.x+doge.img.width*scale >= canvas.width || doge.x <= 0){ doge.xspeed *= -1; } if(doge.y+doge.img.height*scale >= canvas.height || doge.y <= 0){ doge.yspeed *= -1; } } <html> <head> <title>Bouncing Doge</title> <style> * {margin:0; padding: 0; color:red;} </style> </head> <body> <canvas id="whole-screen"></canvas> <script src="js/app.js"></script> </body> </html>