A Quick Side Trip

• Cleaning up some loose ends before we move on.
• Evenutally we will produce this page.
• Starting a new visualization/graphics display.
  • At least for now, I have a shell java script program that I grab to start from.
  • BlankCanvas.js
  • The BlankCanvas function needs modified to store local variables.
  • The Redisplay function needs a body added.
  • Any new methods need to be added to prototype to support additional user interaction.
  • This should probably be turned into a base class from which special classes can be deerived.
  • But my javascript is not that good yet, there is something about the object model I don't get.
• I would like to take a first look at using text.
  • We will be back to discuss text for real later.
  • But it sometimes makes it easier to debug if you can label things on the screen.
  • The canvas has nine methods for dealing with text.
    • font will set or return the current font.
    • textAlign will set or return the text alignment left to right.
      • start or left starts the text at the given coordinates
      • end or right ends the text at the given coordinates
      • center centers the text on the given coordinates.
    • textBaseline will set or return the text alignment top to bottom.
      • Top and Hanging will place the text below the coordinate.
      • Bottom and Alphabetic will place the text above the coordinates.
      • Middle will center the text on the coordinates (top to bottom)
    • fillText(text,x,y) will draw "filled" text at the given coordinates.
    • strokeText(text,x,y) will draw stroke (not filled) text at the given coordinates.
    • measureText(text) will return the length, in pixels, of the given text.
  • Since I was repeating lableing a point, I wrote a function to do it.
    • The function is not a member function, so I passed in the context.
    • I passed in the coordinates.
    • I passed in a flag to left or right align the text.

      function LabelPoint(ctx, x, y, end) {
          var line = "(" + x + "," + y + ")";
      
          ctx.strokeStyle="purple";
      
          if (end) {
              ctx.textAlign="end";
              ctx.strokeText(line, x-5, y);
          } else {
              ctx.textAlign="start";
              ctx.strokeText(line, x+5, y);
          }
      };	    
      

• I wanted to draw some lines so I used the canvas methods to do this as well.
  • Once again, we will look at this in more detail in the future.
  • First of all I wanted to automaticaly generate end points based on the size of the canvas
    • Frequently just taking 90% and 10% of the endpoints of something gives us a nice offest.
    • I will also do -10% and 110% if I want to be outside.
    • In this case, I generate starting and ending points inside of the square (startx, starty) and (endx, endy)

      startx = this.width*.1;
      endx = this.width * .9;
      starty = this.height*.1;
      endy = this.height * .9;
      

  • The canvas has many line drawing methods.
    • They are called "Paths"
    • For now, we will look at what we need to accomplish our task.

      this.ctx.beginPath();
      this.ctx.strokeStyle="#ff2233";
      this.ctx.moveTo(startx, starty);
      this.ctx.lineTo(endx, endy);
      this.ctx.stroke();
      

    • beginPath() starts "recording" data to draw a line.
    • strokeStyle sets the "color" the line will be drawn with.
      • This is actually more complex than color, but this will do for now.
    • moveTo(x,y) moves the "pen" to the location without drawing.
    • lineTo(x,y) moves the "pen" to the location from the current location, drawing a line.
    • stroke() actually draws the line.
• Again, we will examine many of these methods in more detail later.
• Notice, I can create multiple instances of my canvas.
• The final results of this code is here