Graphic JavaScript

Back to index

This activity introduces working with fonts. In particular, this activity focuses on working with the size of a font. Working with fonts requires that a value be set for the font property. Font style and size is set like this:

    ctx.font="30px Arial";

Any call to fillText following this line will be displayed with that font until a new font is set. The student will need to set the font style and size seven times in this assignment. Each call will be identical except for the number provided to the last argument of Font. Here are some fonts you can choose from:


  	ctx.font='10px sans-serif';
  	ctx.font='20px Arial';
	ctx.font='24px Verdana';
	ctx.font='48px Times New Roman';
	ctx.font='16px Courier New';
	ctx.font='30px serif';

Additionally there are other attributes that can be specified. Here are a few examples:


	ctx.font='bold 30px Arial';
	ctx.font='small-caps 30px Arial';
	ctx.font='italic 30px Arial';

EXAMPLE:
This applet is an approximation of what the student will be expected to create. Check out the code and make sure you understand how it works.

ASSIGNMENT:
The student will select a short phrase (at least fifteen letters long) and repeatedly display that phrase using different font sizes in the applet area. (Creative students may elect to use different phrases.) The phrase must be displayed seven times using the following font sizes: 12, 18, 24, 30, 36, 40, 48 with the smallest font displayed at the bottom of the canvas area and the largest at the top.