Welcome to Colin's Canvas

Notes on Canvas:

  1. Canvas does not seem to work well with CSS. It has only two properties (height, width) which should be explicitly styled in the html
  2. The dimensions of a soccer field are: 100yds long x 60 yards wide
  3. To draw a line, you are simply defining the points of the line based on the coordinates on your canvas:
    1. As a reminder, these lines start the script: (1) var c = document.getElementById("myCanvas"); (2) var ctx = c.getContext("2d");
    2. ctx.moveTo(0,0); => set the starting point
    3. ctx.lineTo(200,100); => set the end point
    4. ctx.stroke(); => actually draw the line. It will NOT get drawn without this.
  4. Drawing a circle is a little more involved, the steps are listed below:
    1. There are three main lines of code:
      1. ctx.beginPath(); => begins a path to draw the arc/circle
      2. ctx.arc(135,225,45,0,2*Math.PI); => This will be explained further below but put simply: arc(x,y,r,startangle,endangle)
      3. ctx.stroke(); => like the straight line, this actually draws the circle
    2. For the arc equation/function (whatever it is), the x and y coordinates are self explanatory. The only difference vs. the line and a rectangle is that the (x,y) coordinates are the center point of the circle, not the corner.
    3. The radius is also obvious and is in pixels
    4. The startangle and endangle are more difficult because they are in radians. (Note: I should probably create a simple equation/function to convert to degrees). One big thing to note is that 0 radians is at 3 o'clock.
    5. To draw a full circle, you can simply start at 0 and go to 2*Math.PI. Go to wikipedia for more (Radian) but 2*pi radians is one circle, one-quarter pi radians is 90 degrees.
  5. Drawing a rectangle is the most intuitive
  6. To standardize the soccer field, it needs to be relative to a pixel multiplier, not the length or width of the field. For simplicity and generally, soccer field lengths/widths may change but the 18-yd and 6-yd boxes are always the same, along with the penalty spot and (for me) the center circle radius.
  7. To standardize, I need to get the height and width of the canvas. Every x-coordinate must be relative to width, y-coordinate relative to height and then I can use hard values for measurements that shouldn't change (i.e. 18yd, 6yd, penalty spot, etc.)

Starting Field Players:

Starting Goalie:


Your browser does not support the HTML5 canvas tag.

Links to explore further:
  1. Make a clock that "ticks" using canvas: W3Schools Clock Page