JavaScript - 无法调整画布大小

Question

我正在使用javascript和一些jQuery创建一个绘图应用程序。

我正在尝试在javascript中调整画布大小，但画布没有调整大小... 我想让画布适合用户的屏幕+允许工具栏顶部的空间。 如果有帮助，请输入以下代码：https://codepen.io/mistahdukk/pen/dmaKOV

标记

<div id="canvas">
        <canvas class="drawing-canvas"></canvas>
</div>

的JavaScript

var width = window.innerWidth,
    height = window.innerHeight;

canvas.width = width;
canvas.height= height;

在

Answer 1

将javascript更改为

canvas[0].width = width;
canvas[0].height= height;

更新了codepen：https://codepen.io/anon/pen/LdvdBB

Answer 2

这似乎对我有用。

var width = window.innerWidth,
    height = window.innerHeight;
    
    
    canvas = $("#canvas");
    document.getElementById("canvas").onclick = function(){
    console.log(width);
   document.getElementById("drawing-canvas").width = width;
   }

#canvas{
  float: left;
  background-color: red;
  left: 0;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas">
        <canvas class="drawing-canvas" id="drawing-canvas"></canvas>
</div>