Notes on Canvas:

- Canvas does not seem to work well with CSS. It has only two properties (height, width) which should be explicitly styled in the html
- The dimensions of a soccer field are: 100yds long x 60 yards wide
- To draw a line, you are simply defining the points of the line based on the coordinates on your canvas:
- As a reminder, these lines start the script: (1) var c = document.getElementById("myCanvas"); (2) var ctx = c.getContext("2d");
- ctx.moveTo(0,0); => set the starting point
- ctx.lineTo(200,100); => set the end point
- ctx.stroke(); => actually draw the line. It will NOT get drawn without this.
- Drawing a circle is a little more involved, the steps are listed below:
- There are three main lines of code:
- ctx.beginPath(); => begins a path to draw the arc/circle
- ctx.arc(135,225,45,0,2*Math.PI); => This will be explained further below but put simply: arc(x,y,r,startangle,endangle)
- ctx.stroke(); => like the straight line, this actually draws the circle
- 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.
- The radius is also obvious and is in pixels
- 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.
- 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.
- Drawing a rectangle is the most intuitive
- 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.
- 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:

Bench:

Starting Goalie:

Bench:

Links to explore further:

- Make a clock that "ticks" using canvas: W3Schools Clock Page