title: Dynamically color svg elements on canvas
body: <p>I am trying to draw <a href="https://commons.wikimedia.org/wiki/Category:SVG_chess_pieces#/media/File:Chess_kdt45.svg" rel="nofollow noreferrer">this chess piece</a> to a Canvas element, and I want to give it a custom fill color.</p>
  <p>I tried the following to add the svg to DOM and it worked.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;    
  &lt;/body&gt;
  &lt;script&gt;
      window.onload = function(){
          const color = &quot;#02B09F&quot;
  
          const svg_string = `&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; width=&quot;45&quot; height=&quot;45&quot;&gt;&lt;g style=&quot;fill:none; fill-opacity:1; fill-rule:evenodd; stroke:${color}; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;&quot;&gt;&lt;path d=&quot;M 22.5,11.63 L 22.5,6&quot; style=&quot;fill:none; stroke:${color}; stroke-linejoin:miter;&quot; id=&quot;path6570&quot;/&gt;&lt;path d=&quot;M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25&quot; style=&quot;fill:${color};fill-opacity:1; stroke-linecap:butt; stroke-linejoin:miter;&quot;/&gt;&lt;path d=&quot;M 12.5,37 C 18,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37&quot; style=&quot;fill:${color}; stroke:${color};&quot;/&gt;&lt;path d=&quot;M 20,8 L 25,8&quot; style=&quot;fill:none; stroke:${color}; stroke-linejoin:miter;&quot;/&gt;&lt;path d=&quot;M 32,29.5 C 32,29.5 40.5,25.5 38.03,19.85 C 34.15,14 25,18 22.5,24.5 L 22.5,26.6 L 22.5,24.5 C 20,18 10.85,14 6.97,19.85 C 4.5,25.5 13,29.5 13,29.5&quot; style=&quot;fill:none; stroke:#ffffff;&quot;/&gt;&lt;path d=&quot;M 12.5,30 C 18,27 27,27 32.5,30 M 12.5,33.5 C 18,30.5 27,30.5 32.5,33.5 M 12.5,37 C 18,34 27,34 32.5,37&quot; style=&quot;fill:none; stroke:#ffffff;&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;`        
          
          const parser = new DOMParser();
          const doc = parser.parseFromString(svg_string, &quot;image/svg+xml&quot;);                
          document.querySelector('body').appendChild(doc.firstChild)        
      }
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  <p>but using drawImage with doc.firstChild didn't work, it gave me the following error:</p>
  <p><strong>CanvasRenderingContext2D.drawImage: Argument 1 could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.</strong></p>
  <p>the code:</p>
  <pre><code>        const color = &quot;#02B09F&quot;
  
          const svg_string = `&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; width=&quot;45&quot; height=&quot;45&quot;&gt;&lt;g style=&quot;fill:none; fill-opacity:1; fill-rule:evenodd; stroke:${color}; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;&quot;&gt;&lt;path d=&quot;M 22.5,11.63 L 22.5,6&quot; style=&quot;fill:none; stroke:${color}; stroke-linejoin:miter;&quot; id=&quot;path6570&quot;/&gt;&lt;path d=&quot;M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25&quot; style=&quot;fill:${color};fill-opacity:1; stroke-linecap:butt; stroke-linejoin:miter;&quot;/&gt;&lt;path d=&quot;M 12.5,37 C 18,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37&quot; style=&quot;fill:${color}; stroke:${color};&quot;/&gt;&lt;path d=&quot;M 20,8 L 25,8&quot; style=&quot;fill:none; stroke:${color}; stroke-linejoin:miter;&quot;/&gt;&lt;path d=&quot;M 32,29.5 C 32,29.5 40.5,25.5 38.03,19.85 C 34.15,14 25,18 22.5,24.5 L 22.5,26.6 L 22.5,24.5 C 20,18 10.85,14 6.97,19.85 C 4.5,25.5 13,29.5 13,29.5&quot; style=&quot;fill:none; stroke:#ffffff;&quot;/&gt;&lt;path d=&quot;M 12.5,30 C 18,27 27,27 32.5,30 M 12.5,33.5 C 18,30.5 27,30.5 32.5,33.5 M 12.5,37 C 18,34 27,34 32.5,37&quot; style=&quot;fill:none; stroke:#ffffff;&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;`        
          
          const parser = new DOMParser();
          const doc = parser.parseFromString(svg_string, &quot;image/svg+xml&quot;);                        
  
          let canvas = document.querySelector('canvas');
          canvas.width = 100;
          canvas.height = 100;
      
          let cx = canvas.getContext('2d');
          cx.drawImage(doc.firstChild, 0, 0)
  </code></pre>
  <p>any idea how to fix it, or if you know a better way to color SVGs using javascript</p>