Join Joseph Lowery for an in-depth discussion in this video Setting text size, part of HTML5 Projects: Photo Card Titles.
- View Offline
In this lesson we're going to power up the font size slider so that our users…can quickly and easily adjust their caption size as needed.…Part of the code that we'll insert will ensure that the text is nicely centered…when it first comes on the page, because, well, neatness counts.…Let's begin by adding our event listener code to the canvas_custom.js file found…in the Chapter 3/03_04 scripts folder.…We'll need to scroll down to around line 197. And again, this is very similar to…what we've done before, so we can do our copy-paste operation, change the ID…that we're looking for from textFont to textSize, and then change that function…name from textFontChanged to textSizeChanged.…
Now, let's copy previously done function, paste that in, change the name of the…function to textSizeChanged, and then the variable from fontFace to fontSize.…At this point, we'd normally add in the fontSize variable code to the drawText…routine, but we've already done that. That's on line 224.…We did it because it was necessary to demo the text display.…
Check out the rest of the HTML5 Projects series.
- Setting up a caption submission form
- Creating basic text entry fields
- Integrating color pickers in the form
- Applying text effects like shadows and gradients