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

Opaa! Muito obrigado!
Então, eu quis usar objeto e desestruturação para treinar, consegui fazer funcionar olhando seu código e vendo oq eu devia ter errado, da uma olhada:

const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
        var x = canvas.width/2    //começa no meio do x (player)
        var y = canvas.height/2   //começa no meio do y (player)
        var vel = 10
        
        //objeto player com propriedades do quadrado
        var player = {
            color: 'black',
            altura: '10',
            largura: '10',
            position: {
                coordx: x,
                coordy: y
            },
            mover: {
                cima: () => this.position.coordy = this.position.coordy + vel,
                baixo: () => this.position.coordy = this.position.coordy - vel,
                direita: () => this.position.coordx = this.position.coordx + vel,
                esquerda: () => this.position.coordx = this.position.coordx - vel
            },
        }

        //desestruturação do objeto player
        var {color, altura, largura, position, mover} = player

        //le a tecla digitada
        document.addEventListener('keydown', event => {
            switch(event.keyCode){
                case 37: //esquerda
                    mover.esquerda()
                    break;
                case 39: //direita
                    mover.direita()
                    break;
                case 38: //cima
                    mover.baixo()
                    break;
                case 40: //baixo
                    mover.cima()
                    break;
            }
        }) 
        //desenha o player na tela
        function draw(){
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                ctx.fillRect(position.coordx, position.coordy, largura, altura)
                ctx.fillStyle = color
                requestAnimationFrame(draw) //looping do programa
        }
        draw()  //inicio do programa

Eu não sei pq, mas quando uso o clearRect() no fim da função antes de chamar o requestAnimationFrame(), o player nao aparece na tela, deveria aparecer...

Carregando publicação patrocinada...
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.