The HTML5 Canvas

• References
  • Reference for use in html.
  • API reference.
• The HTML5 canvas
  • This is our basic workhorse for the semester.
  • Other graphics systems have similar objects.
  • We will use this for both 2d and 3d graphics.
• Declaring a canvas

  • <canvas id="canvas_name" height="200" width="200" style="border:2px solid #000000;"></canvas> 

  • Don't forget the </canvas> tag or you will be unhappy.
  • This declares a canvas 200x200 with a solid black border around it.
  • The upper left hand corner is (0,0). (red square);
    • An individual square on the image is a pixel or Picture ELlement.
    • This is actually 3 x 3 pixels so we can see it.
  • The lower right is (197,197).
    • Blue Square.
• We will discuss the background behind the canvas in much more detail later.
  • And will relate this to a graphics card.
  • But for now, I wand to draw.
• The canvas in javascript.
  • We need access to the canvas object.

  • let c1 = document.getElementById("canvas_name") 

  • From a canvas object we can get multiple values.

    let width1 = c1.width;
    let height1 = c1.height;
    console.log("This canvas is ", width1 , " x ", height1);
    
    let ctx1 = c1.getContext("2d");
              

  • The Context is a drawing mode.
• The context
  • This gives us access to different methods.
  • For now we will use the 2d context.
  • Later we will use the web-gl context.
  • We need a reference to the context to do anything.
• Graphics primitives.
  • Most graphics systems have a set of basic objects you can draw.
  • In the 2D context of the html 5 canvas you have a set of these.
    • fillRect, strokeRect, clearRect
    • line: moveTo, lineTo
    • elipse
    • arc
    • arcTo
    • fillText, strokeText
  • These are all created with algorithms
    • That set pixels on the screen.
• In addition there are attributes
  • Lots
  • fillStyle, strokeStyle - for color
  • lineWidth, lineCap
  • font, textAlign, textBaseline, ...
• We will pick both of these up as we go along.
• But you need to know that these are all flags that control how algorithms are executed.
• Drawing a grid on the screen.

  Grid Size Grid Color Red Green Blue Black Width Redisplay

  • let c2 = document.getElementById("grid");
    let w2 = c2.width;
    let h2 = c2.height;
    let ctx2 = c2.getContext("2d");
    let skip = 10;
    let color="green";
    let width = 2;
    
    function DrawGrid(ctx, w, h, skip, color, width){
        let i;
    
        // clear the box
        ctx.clearRect(0,0,w,h);
    
        ctx.lineWidth = width;
        ctx.strokeStyle = color;
        ctx.beginPath();
    
        for(i =0; i <= w; i+= skip){
           ctx.moveTo(i,0);
           ctx.lineTo(i,h);
        }
    
        for(i =0; i <= h; i+= skip) {
           ctx.moveTo(0,i);
           ctx.lineTo(w,i);
        }
    
        ctx.stroke();
    }
    
    DrawGrid(ctx2, w2, h2, skip, color, width); 

  • For lines:
    • you need to begin the path.
    • Then moveTo and lineTo to draw the lnes.
    • Then stroke() or fill to draw the figure.
  • Note
    • We can use the word for color.
      • Or other ways we will discuss later.
    • Also set the width.
• Building an interface
  • First of all, everything is in a pair of tables.

    canvas

    button 1 button 2 button 3 button 4

  • <table border>
       <tr>
          <td> canvas</td>
          <td> 
              <table border>
                 <tr> <td> button 1</td></tr>
                 <tr> <td> button 2</td></tr>
                 <tr> <td> button 3</td></tr>
                 <tr> <td> button 4</td></tr>
               </table>
           </td>
        </tr>
    </table> 

• The GridSize button
  • Html Code:

  • Grid Size <input id="gridSize", type="text" size=4></input> 

  • Javascript to interact with the button

  • // set
    let skip = 20;
    
    let gridBox = document.getElementById("gridSize");
    gridBox.value = skip;
    
    // get
    skip = parseInt(gridBox.value); 

  • Note, this is a pull, we will see a push later.
  • Note: it is good to set the values from the code, not hard code them.
• The Color drop down.
  • HTML

  • Grid Color <select id="gridColor">
       <option value="red">Red</option>
       <option value="green">Green</option>
       <option value="blue">Blue</option>
       <option value="black">Black</option>
    </select> 

  • Javascript

  • // set
    let color = "green";
    
    let colorSelect = document.getElementById("gridColor");
    colorSelect.value = color;
    
    ...
    // get
    color = colorSelect.value; 

• The Slider
  • HTML

  • Width <input type="range", min='1' max='5' value ='1' id="widthSlider"> 

  • Javascript

    // set
    let widthSelect = document.getElementById("widthSlider");
    widthSelect.value = width;
    
    // get
    width = parseInt(widthSelect.value); 

• The final product