title: Wrapper class for canvas context
body: <p>Idea is to make a class that would extend given canvas context, provide additional methods and store some data (like canvas centre or colour pallet) but also allow access to contexts properties</p>
  <p><strong>In plain JavaScript this works fine:</strong></p>
  <pre><code>class Board  {
    constructor(ctx) {
      Object.setPrototypeOf(Board.prototype, ctx)
    }
  
    drawHexagon(){
      //do the drawing
    }
  }
  
  let board = new Board(canvas.getContext(&quot;2d&quot;))
  
  board.fillStyle = &quot;white&quot; //accesses contexts property
  board.drawHexagon() //uses own method
  </code></pre>
  <p>This seems like a hack, but a haven't figured out other way. Also typescript is unaware that Board extends provided context and complains when I try to access it's properties.</p>
  <p><strong>I tried typing Board like this:</strong></p>
  <pre><code>class Board extends CanvasRenderingContext2D {
    constructor(ctx: CanvasRenderingContext2D) {
      super() 
      //typescript requires call to super if class extends something
      //but this creates a runtime error
      Object.setPrototypeOf(Board.prototype, ctx)
    }
  }
  </code></pre>
  <p><strong>tried like this:</strong></p>
  <pre><code>//results in an error from typescript:
  //Class 'Board' incorrectly implements interface 'CanvasRenderingContext2D'
  class Board implements CanvasRenderingContext2D {
    constructor(ctx: CanvasRenderingContext2D) {
      Object.setPrototypeOf(Board.prototype, ctx)
    }
  }
  </code></pre>
  <p>And yes, I could just do it like this</p>
  <pre><code>class Board  {
    context: CanvasRenderingContext2D
    constructor(ctx: CanvasRenderingContext2D) {
      this.context = ctx
    }
  }
  
  let board = new Board(canvas.getContext(&quot;2d&quot;))
  board.context.beginPath() //here is how I would that access contexts property
  </code></pre>
  <p>But the goal is exactly to avoid it (if possible)</p>
  <p><em>I as usual got stuck thinking about one solution and not seeing others.</em></p>
  <p>What would be a proper way to implement this class?</p>