Solved

resize canvas

Posted on 2013-05-10
4
399 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
 
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 34

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

624 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