I Have this Html file with doge doggo where he bouncess off the edge when he hits it(kinda like dvd save screen) and i want to make him slowly infinitly rotate but dont know where to put the script because everywhere i put the rotation script the whole page wents white.
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>