Solved

resize canvas

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

744 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

9 Experts available now in Live!

Get 1:1 Help Now