Canvas Field is an attempt to create a NFL football gamecast type field UI found on sites such as ESPN and CBS in canvas with a javascript API.

API

• Field(elementId): constructor, creates a new field object using the element of a given name.
• markPlay(yards): creates a mark for a play. automatically moves area of next play downward so they do not overlap, also places a black mark at the end of the bar to indicate direction of play.
• yardsToGo(): calculates remaining yards until a touchdown.
• firstDownMark(yards): creates a first down yellow line marker at the given yards.

KNOWN ISSUES

• currently depends on a cavnas element that is 720x300.
• currently plays only go to the left.
• all plays are in one color.
• yardage APIs work based on 0-100 yards rather than 0-50 and a direction