Код Javascript для холста HTML5 не работает

Question

Я написал код, который не работает. У него была ошибка раньше, что было исправлено. Но теперь есть еще одна ошибка: она не будет рисовать прямоугольник на холсте. Консоль не обнаружила ошибку. Вот код:

13.  var canvas=document.getElementById("canvas") 
14.  var ctx=canvas.getContext("2d") 
15.  function getMousePos(canvas,evt){ 
16.   var rect=canvas.getBindingClientRect() 
17.   return{ 
18.    x:evt.clientX-rect.left, 
19.    y:evt.clientY-rect.top 
20.   } 
21.  } 
22.  canvas.addEventListener("mouseclick",function(evt){ 
23.   var mousePos=getMousePos(canvas,evt) 
24.   ctx.fillRect(mousePos.x-15,mousePos.y-15,10,10) 
25.  },false) 

Answer 1

Изменить эту строку:

var rect=canvas.getBindingClientRect() 

в

var rect=canvas.getBoundingClientRect(); 

и

canvas.addEventListener("mouseclick",function(evt) { ... 

в

canvas.addEventListener("click",function(evt) { ... 

, и он должен работать.

См ONLINE DEMO HERE

Answer 2

Событие click не mouseclick.