html2canvas не обнаруживает изменения

Question

моя цель сравнить два холста

• используя реакцию
• использование codemirror в качестве редактора кода.
• использование html2canvas для преобразования элемента html в холст
• использование pixelmatch для сравнения

я меняю div (стиль, содержимое и т. д.) с помощью редактора кода (codemirror) и преобразую его в холст, но изменения не влияют, все равно получая тот же результат (Unit8ClampedArray)

      const onRun = async () => {
        const iframe = document.getElementById("preview");
        const task = document.getElementsByClassName("runjs__task")[0];
        const w = parseInt(task.offsetWidth);
        const h = parseInt(task.offsetHeight);
        const img1 = await html2canvas(iframe, { logging: false }).then(function (canvas) {
            return canvas.getContext("2d").getImageData(0, 0, parseInt(iframe.offsetWidth), parseInt(iframe.offsetHeight)).data
        });
        const img2 = await html2canvas(task, { logging: false }).then(function (canvas) {
            return canvas.getContext("2d").getImageData(0, 0, parseInt(task.offsetWidth), parseInt(task.offsetHeight)).data
        });
        console.log(img1);
        console.log(img2);
        comporeImage(img1, img2, w, h);
    };
    const comporeImage = (img1, img2, w, h) => {
        var diff;
        console.log("results",pixelmatch(img1, img2, diff, w, h, { threshold: 0.5 }));
        return pixelmatch(img1, img2, diff, w, h, { threshold: 0.1 });
    }

пример вывода:

      Uint8ClampedArray(311112) [255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, …]