1. ホーム
  2. javascript

[解決済み] JavaScriptでキャンバスのサイズを変更するには?

2022-02-07 06:04:42

質問事項

JavaScriptのキャンバス(または400px×400pxの描画領域)を400x400より大きくするにはどうしたらよいでしょうか?

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

キャンバスを指定した高さ、幅に拡大する方法はありますか?

解決方法を教えてください。

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

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

  // Event handler to resize the canvas when the document view is changed
  window.addEventListener('resize', resizeCanvas, false);

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Redraw everything after resizing the window
    drawStuff(); 
  }
  resizeCanvas();

  function drawStuff() {
    // Do drawing here
    context.strokeRect(10,10, 230,100);
    context.font = '16px serif';
    context.fillText('The canvas is the blue', 30, 30);
    context.fillText('background color seen here.', 30, 50);
    context.fillText('It will resize if the window', 30, 70);
    context.fillText('size is adjusted.', 30, 90);
  }
})();
* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas {
    background: #77f;  /* to show the canvas bounds */
    display:block;     /* to remove the scrollbars */
}
<canvas id="canvas"></canvas>