JavaScript - Can't resize the canvas

Question

I am making a paint app using javascript and some jQuery.

I am trying to resize the canvas in javascript but the canvas does not resize... I would like to make the canvas fit the user's screen + allow space at the top for the tool bar. Here is a pen for the entire code if it helps : https://codepen.io/mistahdukk/pen/dmaKOV

Markup

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

JavaScript

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

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

In

Answer 1

Change the javascript to

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

Updated codepen: https://codepen.io/anon/pen/LdvdBB

Answer 2

This seems to work for me.

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>