Почему JavaScript не изменяет размер этого изображения?

Question

Я пытаюсь сделать простой пример анимации в JavaScript. Тем не менее, у меня есть изображение, и я пробовал все, что я нашел в Интернете, и видел на предыдущих постах, и все это, но я не могу понять, почему этот образ не будет изменять размер. Может кто-нибудь сказать мне, в чем проблема?

 var x = 50; 
     var y = 20; 

     var xDirection = 1; 
     var yDirection = 1; 
     var image = new Image(); 
      image.src = "http://2.bp.blogspot.com/-iS6eK4lSfi4/UJJRqbKA-VI/AAAAAAAABLA/HLxLJpCpau4/s320/Smiley-Face-2.jpg"; 
      image.style.width = "50px"; 
      image.style.height = "50px"; 
     var canvas = null; 
     var context = null; 

     window.onload = init; 

     function init() { 

      canvas = document.getElementById("gameSurface"); 
      context =canvas.getContext("2d"); 
      setInterval(draw, 1000/30); 
     } 


     function draw() { 

      context.clearRect(0,0,500,500); 
      context.drawImage(image, x, y); 
      x += xDirection; 
      y += yDirection; 

      if ((x + 50) >= 500) { 

       x = 450; 
       xDirection = -1; 

      }else if (x <= 0) { 

       x = 0; 
       xDirection = 1; 
      } 

      if ((y + 50) >= 500) { 

       y = 450; 
       yDirection = -1; 

      }else if (y <= 0) { 

       y = 0; 
       yDirection = 1; 
      } 
     } 

Как вы можете видеть все, что я хочу, это улыбающееся лицо, прыгающее по экрану. Кажется, у меня всегда проблемы с JS ... и я ничего не знаю о JQuery, извините.

Answer 1

Вы изменяете размер элемента img, установив его стиль, но метод canvas .drawImage() не использует стиль элемента. Однако .drawImage()делает позволяют определить размер, если вы предоставите дополнительные аргументы:

context.drawImage(image, x, y, 50, 50); 

Демо: http://jsfiddle.net/vz28W/

См MDN для более подробной информации.