Graphic JavaScript

Back to Index

JavaScript can be used to render many different fonts. Some font names you may be familiar with include:
  1. Comic Sans MS
  2. SansSerif
  3. Serif
  4. Monospaced
  5. Helvetica
  6. TimesRoman
  7. Courier
  8. Geneva
  9. Impact

What actually appears when you specify a font may vary between operating systems and browsers, but theoretically there is a large number of fonts that you can specify in your JavaScript applets.

As you've already seen, you specify a font in JavaScript like this: 


  ctx.font = "bold 12px Arial";
FUN WITH FONTS: Here are a sample fonts for you to inspect. Take a look at the page source to see the code for the entire applet. This applet only displays a sample of nine fonts. You will need to find more fonts to experiment with when you get to the assignment. Your browser does not support the HTML5 canvas tag. FIXED VERSUS VARIABLE WIDTH: Obviously a "w" is wider than an "i", but in fixed width fonts they are alloted the same amount of space. Assuming that the fonts in the example to the right are properly rendered on your screen, you will notice that the letters in the top three lines line up consistantly. However, you will notice that this is not the case with the bottom three lines. Your browser does not support the HTML5 canvas tag.
ASSIGNMENT:
Your job will be to find another nine fonts and include them in demo applets like those shown on this page. So, you will actually create two applets. One will be like the one to the left only you will use nine totally different fonts. The other will be like the one to the right, but instead of monospace, you will find another fixed width font. However, you can still use Comic Sans MS for the bottom bunch of lines. The challenge here is to find and experiment with different fonts so that you become more familiar with how they are rendered on a web page.