Como fazer o objeto sair de um lado e aparecer em outro?

Gente eu sou novato nessa área de Informática (comecei esse ano a fazer aulas técnicas), então eu estou estudando o CANVAS, HTML5 , preciso fazer o que o "quadradinho saia do lado direito/esquerdo e apareça do lado esquerdo/direito e também fazer isso para ele sair da parte de baixo/cima e aparecer na parte de cima/baixo.

O código que estou usando é

https://uploaddeimagens.com.br/imagens/codigo-png--4
https://uploaddeimagens.com.br/imagens/codigo2-png

Gente desculpa , eu não entendo muita coisa ,sou tipo o novato dos novatos.
Imagens nas respostas

Quero que o quadradinho ao andar

atravessar e aparecer do outro lado

sou novo ,como faço pra sinalizar as respostas?

Olá

Seria mais ou menos:

/* se saiu do lado esquerdo */
if (x < 0) {
   /* desloca para o lado direito */
   x += width;
}
/* se saiu do lado direito */
if (x > width) {
   /* desloca para o lado esquerdo */
    x -= width;
}