bnsgt's diary

個人的な備忘と日記

【fabric.js】canvasがw300px * h150pxになってしまう場合の対応

以下のように単純な四角形を設置した場合、canvas要素にインラインスタイル(width: 300px; height: 150px;)が適用される。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas"></canvas>

  <script src="https://unpkg.com/fabric@4.6.0/dist/fabric.min.js"></script>
  <script>
    window.onload = function () {
      var canvas = new fabric.Canvas('canvas');
      canvas.add(new fabric.Rect({
          left: 100,
          top: 100,
          width: 75,
          height: 50,
          fill: 'green',
          stroke: 'black',
          strokeWidth: 3,
          padding: 10
        }));
    }
  </script>
</body>
</html>

f:id:bnsgt:20220114041746p:plain


var canvas = new fabric.Canvas('canvas');の後に、以下を追記し、setWidth・setHeightで任意のwidth、heightを指定すると、その幅と高さのcanvasで描画される。

canvas.setWidth(1000);
canvas.setHeight(500);

f:id:bnsgt:20220114042027p:plain