javascript canvas setTimeout console TypeError: не является функцией

Question

Я пытаюсь выполнить функцию «нарисовать» при нажатии кнопки (идентификатор кнопки также выполняется). При нажатии кнопки функция запускается успешно, однако повторяющиеся итерации не запускаются. Поэтому я сузил проблему до setTimeout. Я получаю следующее сообщение: «draw is not a function». Это сбивает с толку, потому что это определенно функция. Любая помощь приветствуется. Благодарю.

var draw1 = document.getElementById('draw'); 
draw1.addEventListener('click',draw); 

    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var x = 0; 
    var y = 0; 

function draw(aaa,bbb){ 
     ctx.save();//save the cavas state if required 
     ctx.clearRect(0,0,100,100)//clear canvas for redrawing 
     ctx.fillStyle = 'rgba(0,200,0,1)';//style a green box 
     ctx.fillRect (x, 20, 50, 50);//draw the rectangle 
     ctx.restore();//restore the canvas state if saved 
     x += 5;//increment the x position by some numeric value 
     console.log(x); 
     console.log(y); 
     var loopTimer = setTimeout('draw(' + x +','+ 0 +')',200); 
    } 

Answer 1

Не используйте строки для вызова функции. Это очень плохая практика.

Изменить его в анонимную функцию:

var loopTimer = setTimeout(function() { 
    draw(x, 0); 
}, 200); 

Пока ваш x и y являются глобальными и не использовать аргументы, вы можете удалить их из метода draw и назвать его еще проще, без закрытие:

function draw(){ 
    ctx.save();//save the cavas state if required 
    ctx.clearRect(0,0,100,100)//clear canvas for redrawing 
    ctx.fillStyle = 'rgba(0,200,0,1)';//style a green box 
    ctx.fillRect (x, 20, 50, 50);//draw the rectangle 
    ctx.restore();//restore the canvas state if saved 
    x += 5;//increment the x position by some numeric value 
    console.log(x); 
    console.log(y); 
    var loopTimer = setTimeout(draw, 200); 
}