Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

resize canvas

Posted on 2013-05-10
4
Medium Priority
?
403 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 2000 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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…

722 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