I have a canvas inside a div, and I can't get the sizing right

I have a canvas inside of a div, and I want the canvas width to be equal to 90% of the div width.

So, for instance:

<div id="outerDiv" style="height:750px; width:1000px">
<canvas id="myCanvas"></canvas>
</div>

And in the .js file when I initiate the canvas, I have:

window.onload = init;

// Main initialization function
function init () {
initCanvas();
registerInputListeners();
iPhoneToTop();

}

// Set up the drawing canvas
function initCanvas () {
  canvas = document.getElementById("myCanvas");
// Size canvas
  canvas.width  = $("#outerDiv").width * .9;
  canvas.height = $("#outerDiv").height * .9;
}

This isn't working, and is making the canvas really tiny - 2px by 2px. What am I doing wrong?

I tried console logging the width:

 var width = document.getElementById(outerDiv).outerWidth;
 console.log(width);

and I get this error : Uncaught TypeError: Cannot read property 'outerWidth' of null

Answers


It's #outerDiv. You forgot the #. Also I don't think there is width or height in a jQuery object (assuming $ is jQuery).


Need Your Help

Which tools to use for Grails Development

eclipse grails netbeans ivy

I've recently started using Grails and I have the following questions about the available tools for development on the framework:

Google Rich Snippets Not Working

seo schema.org rich-snippets google-rich-snippets structured-data

I'm working on a website for a friend (www.texasfriendlydds.com) and am trying to give them an edge with Rich Snippets that Google allegedly loves. It's a defensive driving school with 10 locations...