title: How do I access the HTML Canvas from Blazor?
body: <p>I am trying to do 2D drawing to the HTML Canvas from Blazor.
  I tried using the Blazor.Extensions.Canvas but it seems to be quite dated and targeted at a prior Blazor Server Side implementation.</p>
  
  <p>I tried implementing a simple example and got an exception</p>
  
  <p></p>
  
  <p>with...</p>
  
  <pre class="lang-cs prettyprint-override"><code>{
  protected Blazor.Extensions.BECanvasComponent _canvasRef;
  private Blazor.Extensions.Canvas.Canvas2D.Canvas2DContext _context;
  
  // Note I had to provide the full path since it seemed to ignore
  //  my @using statement in most cases
  
      protected override async Task OnAfterRenderAsync()
      {
        this._context = await this._canvasRef.CreateCanvas2DAsync();
        await this._context.SetFillStyleAsync("green");
  
        await this._context.FillRectAsync(10, 100, 100, 100);
  
        await this._context.SetFontAsync("48px serif");
        await this._context.StrokeTextAsync("Hello Blazor!!!", 10, 100);
      }
  }
  </code></pre>
  
  <p>I even had to add the full path for the canvas classes in the generated files. 
  However, I finally got it to build without warnings.
  I expected it to draw the green filled rectangle but ... </p>
  
  <p>This created an 'unhandled exception rendering component ' in the browser:
  'Microsoft.JSInterop.JSException: t.getContext is not a function'</p>
  
  <p>referencing the line:
  ' this._context = await this._canvasRef.CreateCanvas2DAsync();'</p>