DIGI 260 - Lab 07 Home


Scripted Graphics
HTML
canvas and JS API

  1. In class today we saw a number of properties and methods which can be used to create simple vector paths in the canvas, and then ink the strokes and fills of those paths:

    // paths
    context.beginPath();
    context.closePath();
    
    // lines
    context.moveTo(x, y);
    context.lineTo(x, y);
    context.quadraticCurveTo(controlX, controlY, endX, endY);
    
    // shapes
    context.rect(x, y, width, height);
    context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
    
    // strokes
    context.lineWidth = 15;
    context.strokeStyle = '#ff0000';
    context.stroke();
    
    // fills
    context.fillStyle = 'yellow';
    context.fill();
    

    We also looked at some standard programming tools - loops and functions - and the Javascript Math.random() method.

  2. Use this template as a starting point.
  3. Make use, as you wish, of the properties and methods above to create a unique design of your own - such as a logo - in the canvas element. HINT: test regularly while you're coding - likely after each element you draw - to make troubleshooting easier.
  4. Use at least one for loop to make a single drawing instruction happen more than once, automagically. Be sure the results of the loop can be easily seen, visually, in the canvas!
  5. Place your Lab 07 HTML file in a folder named with your first and last names, and the number of the lab. .zip this folder and upload it using the D2L system. Don't forget to have fun!

This lab is worth five marks. This lab is due at the beginning of next class.