Skip to content
Advertisement

What is causing my Canvas element to overflow and what can I do to fix it?

I have a problem with sizing my canvas element properly. The result as seen below is a canvas element (green outline) that extends it’s height outside of it’s parent div. What is causing this problem and what can I do to fix it?

resulting

HTML: Here is the HTML code, there isn’t much to it.

JavaScript

SCSS: The more interesting SCSS code.

JavaScript

Javascript: And lastly the JS code that actually does the sizing of the Canvas element.

JavaScript

Advertisement

Answer

Whenever you use a height of 100% and you want the height based on it’s parent, you need to set the parents position to relative.

Also the layout your using looks like it will fit into a flexbox layout nicely.

Lastly, if you want this to be responsive, your going to want to attach a resize event for setting the canvas size.

Below is an example of using these techniques, I’ve also included a footer section, flexbox makes these layout a breeze. hint: run the snippet fullscreen, and resize the window to see the resizing in action.

JavaScript
JavaScript
JavaScript
User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement