画布宽度为视口或父div的100％

Question

I am trying to do 100% Canvas to fit either viewport or parent div. Here is what I have:

 <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); }); 

But the size of canvas is 600px as defined in html. My console log shows this:

 width of canvas is: 600 1440 

So I know that my javascript runs last, therefore I expect the canvas size to be 1440px not 600px.

Also I tried to change .ready to .load or window.load, but it didn't helped.

Answer 1

Explicitly changing the attribute value for canvas before binding fabric works fine. Demo: 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);