typeof html2canvas is undefined

Hey @muaz-khan , I was trying this library to create an array of screen shots generated from my canvas, but the CanvasRecorder function throws me this error "Uncaught Please link: https://www.webrtc-experiment.com/screenshot.js". I tried to find out the source from where it is coming. I think it's from here -

function CanvasRecorder(htmlElement, config) {
    if (typeof html2canvas === 'undefined') {
        throw 'Please link: https://www.webrtc-experiment.com/screenshot.js';
    }

Here is my code -

var canvas = document.getElementById("canvas");
var btn = document.getElementById("btn");

var code = [
    {
        content: "import",
        color: "#569CD6",
        lineNumber: 0,
    },
    {
        content: " this",
        color: "#D4D4D4",
        lineNumber: 0,
    },
    {
        content: " x=",
        color: "#D4D4D4",
        lineNumber: 1,
    },
    {
        content: "10",
        color: "#B5CEA8",
        lineNumber: 1,
    },
    {
        content: "print(x)",
        color: "#D4D4D4",
        lineNumber: 2,
    },
];

// canvas init
const size = window.innerWidth / 2;
canvas.style.height = size / 2 + "px";
canvas.style.width = size + "px";

const scale = window.devicePixelRatio;
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);

canvasCtx = canvas.getContext("2d");
canvasCtx.scale(scale, scale * 2);
canvasCtx.beginPath();
canvasCtx.fillStyle = "#202026";
canvasCtx.fillRect(0, 0, canvasCtx.canvas.width, canvasCtx.canvas.height);

const postRender = () => {
    recorder.stop(function (blob) {
        var url = URL.createObjectURL(blob);
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style.display = "none";
        a.href = url;
        a.download = "test.webm";
        a.click();
        window.URL.revokeObjectURL(url);
    });
};

btn.addEventListener("click", () => {
    btn.textContent = "Stop";
    console.log(typeof htm2canvas);
    var recorder = new CanvasRecorder(canvas, {
        disableLogs: true,
        useWhammyRecorder: true,
    });
    canvasCtx.font = "normal 18px Arial";
    canvasCtx.textAlign = "center";
    let initialOffset_X = 50,
        initialOffset_Y = 20,
        spacingX = 10,
        spacingY = 20;
    let i = 0;
    let x = initialOffset_X,
        y = initialOffset_Y;
    recorder.record();

    intervalTokenID = window.setInterval(() => {
        if (i < code.length - 1) {
            canvasCtx.fillStyle = code[i].color;
            canvasCtx.fillText(code[i].content, x, y);
            x += canvasCtx.measureText(code[i].content).width + spacingX;
            y += (code[i + 1].lineNumber - code[i].lineNumber) * spacingY;
            if (code[i + 1].lineNumber > code[i].lineNumber) {
                x = initialOffset_X;
            }
        }
        if (i === code.length - 1) {
            canvasCtx.fillStyle = code[i].color;
            canvasCtx.fillText(code[i].content, x, y);
            clearInterval(intervalTokenID);
            postRender();
        }
        i++;
    }, 500);
});

And my index.html -

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <button id="btn">Start</button>
        <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
        <script src="script.js"></script>
    </body>
</html>

muaz-khan / RecordRTC

typeof html2canvas is undefined #742