let paddleWidth = 100; let paddleHeight = 25; let paddlePositionX = 200 let paddlePositionY = 200 let ballPositionX = canvas.width /2; //ball position on x let ballPositionY = canvas.height -150; //ball position on y let dx = 5; //shift along x let dy = 5; //shift along y function drawPaddle(){ ctx.beginPath(); ctx.rect(paddlePositionX, paddlePositionY, paddlePositionY, paddleHeight); ctx.rect(200, 200, 100,25) ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } drawPaddle() function drawBall(){ ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(ballPositionX, ballPositionY, 15, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); ballPositionX += dx; ballPositionY += dy; if(ballPositionX >= canvas.width || ballPositionX + dx < 0){ dx = -dx; } if(ballPositionY + dy > canvas.height || ballPositionY + dy < 0) { dy = -dy; } } setInterval(drawBall, 10)Tengo dos funciones, una que mueve una bola al azar y otra que se supone que es una paleta en la pantalla, ahora para mover la bola llamo dibujarBola con setInterval. El problema es que mi paleta no se muestra en la pantalla y si comento el intervalo establecido, se muestra en la pantalla pero mi bola desaparece.
Su método drawBall comienza limpiando el lienzo, por lo que después de dibujar su paleta, el intervalo lo borrará 10 ms más tarde. Solucione esto eliminando la llamada clearRect de su función drawBall y volviendo a dibujar la paleta en cada ciclo:
setInterval(() => { ctx.clearRect(0, 0, canvas.width, canvas.height); drawPaddle(); drawBall(); }, 10)