html5 increasing font size in a simple step?

donna1 · 12-01-2012, 04:54 PM

I want to increase the font size of items on my shopping list temporarily when I click on them.
So I want

var shoppingitem, fontsize=10;

if clickedon==True {
context.font.size++;
}

context.fillText(shoppingitem,10, shoppingitemnum*20);

Problem is increasing font size seems to require a context.font = "big long string detailing font and font size in px"

Is there a way to increment font size integer without having to turn it all into a concateated string and send it to context.font =
?

www.donoi.hostoi.com

Philip M · 12-02-2012, 10:10 AM

Change the className of the <span> or <p> onclick to a new class with a different font size/color/whatever.
If you want to revert to the original size on a second click, you need to count the clicks odd/even.
You may be looking for onmouseover rather than onclick.

Djokovic won against the background of his current father's illness. - Commentator Radio 4

janehollin · 12-02-2012, 06:36 PM

Try this

Code:

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title></title>
<style type="text/css">
span:hover {font-size: medium;}
#pagecontent {font-size: small;}
</style>
</head>
<body>
<div id="pagecontent">
<span>Test</span><br />
<span>Test1</span><br />
<span>Test2</span><br />
<span>Test3</span><br />
</div>
</body>
</html>

donna1 · 12-02-2012, 07:30 PM

That is a neat solution Jane, thank you

but I want to do it in javascript on a canvas
I really havent got the hang of this CSS stuff so was hoping to avoid it

I got stuck with the <div> command early on so switched to javascript for everything but the canvas.text command takes a string rather than a number to set the size