是否可以将Canvas ID的width和height属性设置为窗口大小的90％？

Question

I'm having trouble getting the window size to be 90% of the size of the screen with Sketch.js.

I tried using Javascript but it starts the canvas size as huge (way bigger then the specified size) then after I start drawing it gets to the expected size.

I have a cancel drawing button that closes out the drawing and it is on a touch-pad. Because of this, until the user starts drawing the cancel button is not visible.

Here is the JS Fiddle

---

 $('#mysketch').sketch(); $('canvas').attr('height', $(window).height() + 'px'); 

 <script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script> <canvas id='mysketch' style="height:90%; width:100%; border: 1px solid black; "></canvas> 

Answer 1

Try using css , setting canvas height to 90vh , width to 90vw . See Viewport units: vw, vh, vmin, vmax , <length>

 $("#mysketch").sketch(); 

 canvas { height:90vh; width:90vw; } 

 <script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script> <canvas id='mysketch' style="height:90%; width:100%; border: 1px solid black; "></canvas> 

jsfiddle http://jsfiddle.net/mqzge8wd/3/

Answer 2

You can simply declare a variable like this

var procentOfHeight = $(window).height() * 0.9;

$('#mysketch').sketch();
$('canvas').css('height', procentOfHeight + 'px');

I have edited the code and changed attr to css when you set the height. Now its working. Try the snippet below where I have a hight of 50%.

 var procentOfHeight = $(window).height() * 0.5; $('#mysketch').sketch(); $('canvas').css('height', procentOfHeight + 'px'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script> <canvas id='mysketch' style=" width:100%; border: 1px solid black; "></canvas>