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.)