title: How to properly use TypeScript types with a Styled Component canvas on React
body: <p>I am creating a React component on Gatsby using TypeScript and have defined a canvas Styled Component this way:</p>
  
  <pre><code>const Background = styled.canvas`
    position: fixed;
    width: 100%;
    height: 100%;
  `;
  </code></pre>
  
  <p>And to use it I am assigning types to it this way:</p>
  
  <pre><code>const canvas: HTMLCanvasElement = Background,
    context = Background.getContext('2d');
  </code></pre>
  
  <p>But I am getting this error with the canvas type:</p>
  
  <p><a href="https://i.stack.imgur.com/rI6Lx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rI6Lx.png" alt="enter image description here"></a></p>
  
  <pre><code>Type 'String &amp; StyledComponentBase&lt;"canvas", any, {}, never&gt; &amp; NonReactStatics&lt;never, {}&gt;' is missing the following properties from type 'HTMLCanvasElement': height, width, getContext, toBlob, and 238 more.
  </code></pre>
  
  <p>I am also getting an error on the <code>.getContext()</code> method:</p>
  
  <p><a href="https://i.stack.imgur.com/CjDNM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CjDNM.png" alt="enter image description here"></a></p>
  
  <pre><code>This expression is not callable.
  Type 'never' has no call signatures.
  </code></pre>
  
  <p>I have been searching for a solution but can not find a proper one for this specific problem.
  Could someone please explain to me the best way to use Styled Component canvas with TypeScript?</p>