param options param options . canvas { DOMElement } param options . width { Number } param options . height { Number } export class Canvas { context : any ; constructor ( public canvas = null , public height = 100 , public width = 100 ) { if ( ! this . canvas ) { this . canvas = document . createElement ( 'canvas' ) ; } this . canvas . height = this . height ; this . canvas . width = this . width ; this . context = this . canvas . getContext ( '2d' ) ; } param context { Object } param stroke { String } param fill { String } _strokeAndFill ( stroke , fill ) { const c = this . context ; if ( stroke ) { c . strokeStyle = stroke ; c . stroke ( ) ; } if ( fill ) { c . fillStyle = fill ; c . fill ( ) ; } } param x { Number } param y { Number } param size { Number } param stroke { String } param fill { String } circle ( x , y , size , stroke , fill ) { const c = this . context ; c . beginPath ( ) ; c . arc ( x , y , size / 2 , 0 , Math . PI * 2 , true ) ; c . closePath ( ) ; this . _strokeAndFill ( stroke , fill ) ; } /**
     * Clear the canvas.
     */ clear ( ) { if ( this . context . clearRect ) { this . context . clearRect ( 0 , 0 , this . width , this . height ) ; } else { this . canvas . width = this . canvas . width ; } } param x { Array < Number > } param y { Array < Number } param stroke { String } param fill { String } line ( x , y , stroke , fill ) { const c = this . context ; c . beginPath ( ) ; c . moveTo ( x [ 0 ] , y [ 0 ] ) ; for ( let i = 1 , len = x . length ; i < len ; i ++ ) { c . lineTo ( x [ i ] , y [ i ] ) ; } this . _strokeAndFill ( stroke , fill ) ; } param font { String } param text { String } return { TextMetrics } measureText ( font , text ) { const c = this . context ; c . font = font ; return c . measureText ( text ) ; } param x { Array < Number > } param y { Array < Number > } param stroke { String } param fill { String } polygon ( x , y , stroke , fill ) { const c = this . context ; c . beginPath ( ) ; c . moveTo ( x [ 0 ] , y [ 0 ] ) ; for ( let i = 1 , len = x . length ; i < len ; i ++ ) { c . lineTo ( x [ i ] , y [ i ] ) ; } c . closePath ( ) ; this . _strokeAndFill ( stroke , fill ) ; } param text { String } param font { String } param x { Number } param y { Number } param stroke { String } param fill { String } param align { String } text ( text , font , x , y , stroke , fill , align = 'left' ) { const c = this . context ; c . font = font ; if ( align === 'center' || align === 'right' ) { const size = c . measureText ( text ) ; if ( align === 'center' ) { x = x - size . width / 2 ; } else { x = x - size . width ; } } if ( stroke ) { c . strokeStyle = stroke ; c . strokeText ( text , x , y ) ; } if ( fill ) { c . fillStyle = fill ; c . fillText ( text , x , y ) ; } } }