Próbuję wyeksportować dość prosty HTML do canvas, a następnie png. Aby to zrobić, używam rasterizeHTML (http://cburgmer.github.io/rasterizeHTML.js/). Problem, z którym mam do czynienia, polega na tym, że otrzymuję ostrzeżenie, jak gdyby ładowałem zewnętrzny obraz / zasób, ale tak nie jest. To właśnie próbowałem:

HTML:

<canvas height="500" width="500" id="rasterizer"></canvas>

Javascript

var canvas=document.getElementById("rasterizer");
rasterizeHTML.drawHTML('<div width="300px" height="300px" > <div style="width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;margin: -100px 0 0 -100px;"><div style="width: 100%;height: 100%;border-radius: 50%;position: absolute;top: 0;left: 0;margin: 0;z-index: 1;background: #e4f1ea; ">            </div>            <div style="border-radius: 50%;position: absolute;top: 50%;left: 50%;z-index: 3;background: #b6cfe1;width:73.997475122531%; height:73.997475122531%; margin:-36.998737561265% 0 0 -36.998737561265%"></div>        </div></div>',canvas);
canvas.toDataURL("image/png");

HTML po prostu renderuje 2 okręgi, jeden nad drugim. Rasterizer jest w stanie pokazać to w kanwie bez problemu, ale kiedy próbuję uruchomić .toDataURL, kończę na jednym z dwóch problemów:

Pusty obraz (jeśli uruchamiam kod po raz pierwszy) o tym samym rozmiarze co płótno.SecurityError: Nie można wykonać „toDataURL” na „HTMLCanvasElement”: skażone płótna nie mogą być eksportowane.

Nie mam pomysłów, ponieważ powinno się to odbywać za pomocą zewnętrznych zasobów, a nie w pełni wbudowanego html. Ktoś wie, dlaczego tak się mogło stać? Dzięki.