title: how to load Image and use it in canvas with gatsby SSR
body: <p>The problem is I could not create image with none of the supported types : <code>CSSImageValue</code> or <code>HTMLImageElement</code> or <code>SVGImageElement</code> or <code>HTMLVideoElement</code> or <code>HTMLCanvasElement</code> or <code>ImageBitmap</code> or <code>OffscreenCanvas</code> in my SSR application with gatsby .</p>
  
  <p>I tried <code>canvas</code> npm package <code>Canvas.Image</code> to make image HTMLImageElement 
   but it has same error with Image constructor message too.</p>
  
  <p>my main error message :</p>
  
  <pre class="lang-sh prettyprint-override"><code>Context.js:225 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
  </code></pre>
  
  <p>node <code>canvas</code> package code and error message :</p>
  
  <pre><code>import { Image as CanvasImage } from 'canvas';
  
  const image = new CanvasImage();
  image.src = avatars[avatar];
  
  console.log(image);
  </code></pre>
  
  <pre class="lang-sh prettyprint-override"><code>TypeError: canvas__WEBPACK_IMPORTED_MODULE_3__.Image is not a constructor
  </code></pre>
  
  <p>I use <code>react-konva</code> package to draw canvas and <code>Image</code> in it.</p>