Programming Basics: A website for teaching people how to program
Do your programming with [jsbin] or [Orion]

Computer Graphics with HTML5 Canvas and JavaScript: Bonus Topic: Text

Although a picture is worth a thousand words sometimes it's just easier to write things out. That's why in this section I'm going to cover how to write some text on the screen.

Here is a program for drawing text on your computer. You use the fillText() command and then you specify three things:

The first thing is the words that you actually want to draw. In this case we'll use the word “hello.”

Then you have to say where you want to write the words hello. As before, you have to give two numbers: how far to the right you want to go

and then how far down you want to go. And that's it. You've now drawn some text onto the screen.

If you want to change the size of your words you can use the font command. This allows us to tell the computer what sort of font we want the computer to draw things with. Here we'll write c.font='20px'.

The 20px refers to how big you want the font to be in pixels. So here we are saying that we want the text to be twenty pixels tall,

which makes the text much bigger than before.

You can also tell the computer what style of font you want to use. So here after the 20px, we can put “serif”.

This tells the computer to use a fancier font. Or you can just directly give the name of a font like Helvetica or Times New Roman.

So now that you know how to use text, go ahead and try drawing some things with text on your computer.

Do your programming with [jsbin] or [Orion]

Programming Basics

E-mail | About | Privacy Policy