<!DOCTYPE html>
<html>
<body>
<script>
onload = () => {
    var img = new Image();
    img.onload = () => {
        var canvas = document.createElement('canvas');
        canvas.setAttribute('width', '640');
        canvas.setAttribute('height', '480');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = ctx.createPattern(img, "repeat");
        ctx.fillRect(50, 50, 100, 100);

        document.body.style.backgroundImage = `url(${canvas.toDataURL()})`;

        parent.postMessage("frameLoaded");
    };
    img.src = "background.png";
};
</script>
</body>
</html>
