JavaScriptを使用してキャンバスのサイズを変更するにはどうすればよいですか？

Question

400x400よりも大きいJavaScriptキャンバス（または400x400ピクセルの描画領域が何であっても）を作成するにはどうすればよいですか？

私は1440pの画面を持っていますが、HTMLファイルでJSファイルを実行すると、キャンバスは左上の小さな400px x 400pxボックスではありません。

キャンバスを指定した高さと幅に拡張するためにできることはありますか？

Answer 1

次のjsfiddleは、キャンバスのサイズを変更する方法を示しています。 https://jsfiddle.net/jaredwilli/qFuDr/

(function() { 
 
     var canvas = document.getElementById('canvas'), 
 
       context = canvas.getContext('2d'); 
 

 
     // resize the canvas to fill browser window dynamically 
 
     window.addEventListener('resize', resizeCanvas, false); 
 
     
 
     function resizeCanvas() { 
 
       canvas.width = window.innerWidth; 
 
       canvas.height = window.innerHeight; 
 
       
 
       /** 
 
       * Your drawings need to be inside this function otherwise they will be reset when 
 
       * you resize the browser window and the canvas goes will be cleared. 
 
       */ 
 
       drawStuff(); 
 
     } 
 
     resizeCanvas(); 
 
     
 
     function drawStuff() { 
 
       // do your drawing stuff here 
 
     } 
 
})();

Answer 2

あなたがHTMLを通じてキャンバスを宣言していますか？あなたがいる場合は、使用することができます。

<canvas id="myCanvas" width="1400" height="900"></canvas> 

あなたはJavascriptてサイズを変更したい場合は、あなたが使用することができます。

<script type="text/javascript"> 
    document.getElementById('myCanvas').height = 800; 
    document.getElementById('myCanvas').width = window.innerWidth; 
</script> 

Answer 3

をJavascriptがおそらく設定するCSSの試みを無視しようとしているとJavaScriptの& CSSにおけるキャンバスの幅&高例えば、私はあなたのIDがキャンバスと呼ばれている場合は、私のキャンバスは650pxと750pxの高さの幅を持たせたいともキャンバスタグに

を幅&高さを追加すると3210

Answer 4

あなたのプロジェクトにProcessing.JSを使用しているなら、私は助けになるかもしれません。私はそれが通常のJavaScriptで動作するかわからない。あなたは、画面サイズを自動検出したい、それはしかし、あなたが問題に実行可能性がある。この

var screenSizeH = screen.height; 

OR

var screenSizeW = screen.width; 

ようも可能であればそれは

size(screenHeight, screenWidth); 

しかし、ショットの価値があります。キャンバスのサイズ変更はキャンバスのサイズ変更だけであり、内部のものではありません。

これを回避するには、すべてのものにスケールを掛けることです。

var scaless = screenSize/400; 

正方形であれば、何倍にもスケールを掛ける必要があります。高さと幅の2つの尺度を作成する必要があります

Answer 5

canvas要素は、標準のDOMオブジェクトと同様です。したがって、あなたは、標準のCSSを使用してキャンバスのサイズを変更することができます

<canvas /> 
<style> 
canvas { 
    width: 100%; 
    min-height: 400px; 
} 
</style> 

https://jsfiddle.net/z3pL9qp9/

---

キャンバスを再構築するのは簡単です。ディメンションの変更を考慮して再描画する必要があるコンテンツです。