JavaScriptを使用してHTML5キャンバスに描画するときの.pngイメージのサイズ変更

Question

JavaScriptを使用してHTML5キャンバスにいくつかの.pngイメージを描画しようとしています。私は現在、キャンバスに画像を描画する関数を持っていますが、画像はキャンバスには大きすぎますので、その一部だけが表示されます。

私が現在持っている機能は次のとおりです。

function drawImage(x, y){ 
      var numberImage = new Image(); 
      numberImage.src = imageSource; 
      context.drawImage(numberImage, x, y); 

     } 

と私が使用して関数を呼び出す：

var image1 = new Image(); 

image1.onLoad = function(){ 
       context.drawImage(image1, 50, 50); 
       }; 
      image1.src="1.png"; 

それが描かれていたときに、誰もが画像をリサイズする方法を知っていれば私は思っていました私はちょうどサムネイルサイズの画像にすることができるように、キャンバスに？

ありがとうございます！

私は画像のサイズを変更するのdrawImageの関数にパラメータを追加しようとしているが、これは任意の違いを作っているようには見えない...

var image1 = new Image(); 

image1.onLoad = function(){ 
       context.drawImage(image1, 50, 50, 10, 10); 
       }; 
      image1.src="1.png"; 

Answer 1

私はトラブルあなたのコードで問題を発見していた...しかし、私はそれを見つけました！

あなたはこれを嫌うつもりです：あなたはimage.onloadの代わりにimage.onLoadを書きました。はい、JavaScriptは大文字と小文字を区別します。 :-)

正しいコードは次のとおりです。

var image1 = new Image(); 

image1.onload = function(){ 
       context.drawImage(image1, 50, 50, 10, 10); 
       }; 
      image1.src="1.png"; 

Answer 2

のdrawImage（）は、追加の幅と高さのパラメータを取ります。

context.drawImage(image, x, y, width, heighT) 

https://duckduckgo.com/?q=!mdn+drawimage

Answer 3

あなたはキャンバスのサイズを設定するには、CSSを使用していますか？要素の高さと幅を代わりに設定する必要があります。そうしないと、キャンバス内のすべての要素が「予期せずに」スケールされます。これはあなたの問題かもしれません。

Strange HTML5 Canvas drawImage behaviour