Graphic JavaScript

Back to index

Suppose the student wishes to simply draw lines to create a stunningly interesting visual display. JavaScript provides the following functions for this purpose. Here's how to use them:

   
   ctx.beginPath();
   ctx.moveTo(30,50);
   ctx.lineTo(130,150);
   ctx.stroke();

This example will draw a horizontal line starting at (30,50) and ending at (130,150). That is, the starting point is 30 units to the right of the left edge of the applet area and 50 units down from the top of the applet area. The end point is 130 units to the right of the left edge of the applet area and 50 units down from the top of the applet area.

This example will create a vertical line:


   ctx.beginPath();
   ctx.moveTo(100,50);
   ctx.lineTo(100,150);
   ctx.stroke();

Here's another example that renders a diagonal line:


   ctx.beginPath();
   ctx.moveTo(30,150);
   ctx.lineTo(130,50);
   ctx.stroke();

EXAMPLE:
Take a look at the code for this applet. As you can see it renders four lines arranged as a tic-tac-toe grid. Also notice that the lines are somewhat thick. Find the line in the code which sets line thickness in the applet. Also note that in order to set the color for a line we use strokeStyle rather than fillStyle.

ASSIGNMENT:
Basically, the student will create something similar to a tic tac toe grid, but different in a number of ways. Actually the configuration created by the student will look more like a section of graph paper with thick and thin lines. Create six thick lines, three vertical and three horizontal. The thick lines should be spaced evenly. Between each pair of thick lines place two thin lines both horizontally and vertically. That should come out to a total of six thick lines and eight thin lines. It might help to draw this configuration on paper before attempting to complete the assignment.