Executando verificação de segurança...
1

quando uso o clearRect() no fim da função antes de chamar o requestAnimationFrame(), o player nao aparece na tela,

Mas é claro. O clearRect está limpando o canvas. Veja na documentação que ele "zera" toda a área indicada. E como estamos usando 0, 0, canvas.width, canvas.height, então ele limpa toda a área do canvas.

Se vc chamar clearRect no final, ele vai limpar qualquer coisa que vc tiver desenhado antes. Por isso movi ele para o começo (primeiro limpa, depois desenha o que precisa).


Outra coisa, no meu código eu usei ponto-e-vírgula no final das linhas. Pode parecer "frescura", e sei que o JavaScript "aceita" o código sem ponto e vírgula e "funciona" (e tem até "cursinhos famosos" que dizem que não precisa usar), mas eu prefiro colocar, pois isso evita algumas situações bizarras que podem ocorrer se você não usá-los, como essa e essa (veja mais sobre isso aqui).

Quanto à desestruturação, sugiro treinar em um caso no qual faça sentido. Neste caso, da forma como foi feito, eu acho que não faz.

Carregando publicação patrocinada...