Solved

resize canvas

Posted on 2013-05-10
4
386 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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

803 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