/Canvas-Field

Creates a football field for gamecasting using a canvas element and javascript.

Primary LanguageJavaScript

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