SVG в Html5 Проблема с холстом Не удалось выполнить drawImage на CanvasRenderingContext2D

Question

TypeError: не удалось выполнить 'drawImage' в 'CanvasRenderingContext2D': предоставленное значение не относится к типу '(CSSImageValue, HTMLImageElement или SVGImageElement, или HTMLVideoElement, или HTMLCanvasElement, или ImageBitmap, или OffscreenCanvas)'

* 1002 загрузить встроенный элемент svg в html5 холст (преобразовать SVG в изображение, а затем загрузить img в холст). Кажется, появляется ошибка при рисовании изображения из CanvasRenderingContext2D.drawImage.

Я пытался использовать библиотеку HTML2Canvas, но, похоже, она не работает в ie11 (изображение не отображается на холсте)

import React from "react";

export default class SVGToCanvas extends React.Component {
    constructor(props) {
        super(props);
        this.state = { dataUrl: null };
    }

    handlePrint = (ele) => {
        const svg = new XMLSerializer().serializeToString(this.mysvg);
        let imgData = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)));
        this.myimg.src = imgData;
    }

    imgLoad = (img) => {
        debugger;
        this.mycanvas.width = 100;
        this.mycanvas.height = 100;

        const canvas = document.getElementById('mycanvas');
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0); // getting error 
   }

    render() {
        return (
            <div id="mydiv">
                <button onClick={this.handlePrint}>Print</button>
                <div >
                    <svg ref={ref => this.mysvg = ref} id="mysvg" width="100" height="100">
                        <circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
                    </svg>
                </div>
                <canvas id="mycanvas" ref={ref => this.mycanvas = ref}></canvas>
                <img ref={ref => this.myimg = ref} src={this.state.dataUrl} onLoad={this.imgLoad} alt="" id="myimg" />
            </div>

        )
    }
}