Basketball Court

Theme Config

To specify a preset theme, just do the following:

xxxxxxxxxx
 
court({
  theme: 'beach' // This will apply the `beach` theme for you instead of the default `plain`.
})

Customize

The script will generate an SVGElement which contains a g element as its sole child. Every part of the court is an element to this g element and can be customized seperately. The below image shows each part of the court and they are listed in z-index order.

global: Use on the g element. You can define some global property here.
court: The side line and the base line.
centerCircle: The center circle.
restrainCircle: The restraning circle inside the center circle.
hcline: The half-court line.
tpline: The three-point line.
lane: The lane (key or painted area or restricted area or three second area).
innerLane: The rectangle inside the lane. Will never be rendered if trapezoid is true in options.
ftCircleHigh: The free-throw circle (high post side).
ftCircleLow: The free-throw circle (low post side).
restricted: Restricted area.
backboard: The backboard.
rim: The rim (or hoop or basket).

To hide a path, just set it to false and you are done!

xxxxxxxxxx
 
court({
  theme: {
    backboard: {
      stroke: red // This will stroke the backboard in red.
    },
    rim: false // This will hide the rim.
  }
})

Note: You should be care of the property values for that you might encounter the problem of script injection if they are unsafe string.

You can use data option to extend the preset theme.

xxxxxxxxxx
 
court({
  theme: 'beach',
  data: {
    rim: false
  }
})