Explicación del tema: Para mover un objeto en pantalla, primero debemos entender que la esquina superior izquierda del Canvas es la coordenada (0,0). Al presionar las flechas del teclado, JavaScript "escucha" el evento (keydown) y modifica la posición del objeto: sumar a 'X' mueve a la derecha, restar a 'X' mueve a la izquierda, sumar a 'Y' mueve hacia abajo y restar a 'Y' mueve hacia arriba. Tras actualizar las coordenadas, el lienzo se borra y se vuelve a dibujar el objeto en su nueva posición, creando la ilusión de movimiento.
Enlace/Archivo de la animación: Para insertar la animación en eXeLearning, usa el iDevice "Sitio Web Externo" o inserta un <iframe> en un bloque de texto que apunte al archivo index.html.