Link to home
Create AccountLog in
Avatar of jagguy
jagguyFlag for Australia

asked on

resize canvas

Hi,

What is the method to resize the html5 canvas ?
I really need the canvas to fit 3 sizes (desktop, tablet and phone) and resize in proportion.

I have seen stuff like this
http://cssdeck.com/labs/emcxdwuz
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

well if you are using canvas then you are only targeting HTML5 aware browsers which will also support the advanced features of CSS3.  So set the width and the height of the canvas using vh and vw units

The vh unit represents 1/100 of the height of the viewport and the vw represents 1/100 of the width of the viewport.

so:
canvas {width:40vh;height:60vw;}
will set the size of the canvas to 60% of the width of the visible screen and 40% of the visible height of the screen.  Re-sizing will be automatic because the height and width are directly bound to the dimensions of the view port.

Support by IE9+ firefox 19+ chrome 20+ safari 6+ latest blackberry and latest Android.


Cd&
Avatar of jagguy

ASKER

That link is 2 years old and probably still works, but probably has issues with some platforms that did not even exist when the article was written.  Back then both HTML5 and CSS3 were about 25% complete, and the way canvas works has been tweaked and standardized.

Percentages will work most of the time, but using vh and vw mean the sizing is from the viewport, and not derived from the size of the containing element.

Cd&
ASKER CERTIFIED SOLUTION
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account