ビューポートまたは親divのキャンバス幅

Question

100％Canvasをビューポートまたは親divに合わせようとしています。

<canvas id="mapDrawingCanvas" width="600px" height="600px" style="position:fixed;"></canvas> 
 
<script> 
 
    console.log("width of canvas is: "+$("#mapDrawingCanvas").width()); 
 
</script>

$(document).ready(function(){ 
 
    var viewportWidth = $(window).width(); 
 
    var viewportHeight = $(window).height(); 
 

 
    canvas = new fabric.Canvas('mapDrawingCanvas'); 
 
    canvas.selection = false; 
 
    canvas.width = viewportWidth; 
 
    canvas.height = viewportHeight; 
 
    console.log(canvas.width); 
 

 
});

しかし、HTMLで定義されたキャンバスのサイズは600PXです：ここに は、私が持っているものです。だから私は私のjavascriptのは、それゆえ私はキャンバスのサイズは1440pxない600PXことを期待し、最後に実行されることを知っている

width of canvas is: 600 
 
1440

：私のコンソールログには、このことを示しています。

また、.readyを.loadまたはwindow.loadに変更しようとしましたが、それは助けになりませんでした。

Answer 1

バインド前にキャンバスの属性値を明示的に変更すると、fabricが正常に動作します。 デモ：https://jsfiddle.net/m7y9uo6x/2/

<canvas id="mapDrawingCanvas" width="600px" height="600px" style="position:fixed;"></canvas> 
<script> 
    console.log("width of canvas is: " + $("#mapDrawingCanvas").width()); 

</script> 


var viewportWidth = $(window).width(); 
var viewportHeight = $(window).height(); 
debugger; 
var canvasElem = $("#mapDrawingCanvas"); 
canvasElem.attr("width", viewportWidth); 
canvasElem.attr("height", viewportHeight); 
canvas = new fabric.Canvas('mapDrawingCanvas', { 
    backgroundColor: 'rgb(100,100,200)' 
}); 
canvas.selection = false; 
console.log("new width" + canvas.width);