Solved

resize canvas

Posted on 2013-05-10
4
382 Views
Last Modified: 2013-05-15
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
0
Comment
Question by:jagguy
  • 2
4 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39155568
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&
0
 

Author Comment

by:jagguy
ID: 39157335
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39158241
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&
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
ID: 39158886
greetings jagguy, , there may be more than one way to do changing the width, the links you gave do resizing the canvas, by javascript, when you change the width of the browser, you may can get this, just by setting the width of your canvas (or canvas container) to a Percentage of its container .
But the way I deal with this is to use the new CSS media screen with the max-width, I have used stuff like this -

<style>
.intext{width:1070px;
margin:3px 11px;
}

.welc{position:absolute;
top:2px;
left:6px;
z-index:1;
}

@media screen and ( max-width: 800px) {.intext{width: 730px;} /* changes intext width to 750 at 800 */
.welc{display:none;}}
@media screen and ( max-width: 480px) {.intext{width: 420px;}} /* changes intext width to 420 at 480 */
@media screen and ( max-width: 380px) {.intext{width: 360px;}}
</style>

this does not do a constant re-size, just three sizes, without javascript

you may want to try this -
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

if your are wanting a view in phones and tablets, many mobil browsers scale the web pages so a large web page shrinks down to phone size screen, the text is then impossible to read as Too Small, adding the above meta   can prevent that/
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now