задача: сделать движение загруженной картинки
создаем холст:
<html>
<canvas width='480' height='320' id='example'></canvas>
создаем объект Image и загружаем картинку:
<script>
var
example = document.getElementById("example")
ctx = example.getContext('2d')
pic = new Image()
pic.src = 'image.png'
x=100 // начальная координата картинки по горизонтали
// если картинка загружена, то включаем таймер, который будет вызывать функцию движения картинки:
pic.onload = function() {
setInterval(motion(), 1000/30)
}
// функция движения картинки
function motion() {
ctx.drawImage(pic, x, 0) // выводим картинку по координатам (pic, x, 0)
x++ // увеличиваем координату X
}
</script>
в результате картинка загружается и таймер вызывает функцию, картинка выводится по координатам (pic, x, 0), но движение не происходит
как правильно сделать вывод картинки и изменение координаты X ?