以下のように単純な四角形を設置した場合、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>
var canvas = new fabric.Canvas('canvas');
の後に、以下を追記し、setWidth・setHeightで任意のwidth、heightを指定すると、その幅と高さのcanvasで描画される。
canvas.setWidth(1000); canvas.setHeight(500);