how to divide my html into parts using canvas and resize it fit browser window

Question

I'm new to webpage development and now little about html.

Div tag will be used to divide webpage into different sections but how i can do this using canvas or even with div tag. For reference please see the attached image page-division.

I want to divide as shown above.

Also these divisions should resize as per window of browser also. I tried 2-3 options but it did not work well.

do i need to write in javascript ?

Thanks

Answer 1

Overview

What you are asking about is generally known as "responsive" design.

That's a big topic! Here's a link to an introduction of responsive design:

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

You ask about scaling, but responsive design also involves moving content based on the device size.

For example if your design above is viewed on a phone you might want the red and green sections to stack below the blue sections. You can use CSS to move your content based on resizing events.

Now to your answer.

Canvas is often used to present graphs and other visual information.

For example, your red rectangle might contain a graph using a canvas

Your canvas (your graph) can be scaled like this:

// the original size of your red rect
// this is the red width at "full size"

var originalWidth=450;
var originalHeight=125;

// new max values for your red rect
// this example assumes the user resizes their browser to less width

var maxWidth=300;
var maxHeight=125;

// now resize the canvas while maintaining aspect ratio
// so your graph does not distort

var scaleFactor=Math.min((maxWidth/originalWidth),(maxHeight/originalHeight));

// resize the canvas element proportionally

canvas.width=originalWidth*scaleFactor;
canvas.height=originalHeight*scaleFactor;

// A gotcha!  When you resize the canvas all its content is erased.
// Therefore, you must redraw your graph to the canvas

// scale the canvas

context.scale(scaleFactor,scaleFactor);

// now redraw your graph as you originally did
// context.scale will take care of all the scaling for you!