document.addEventListener('keyup', (event) => {if (event.key === '[') {parent.document.getElementById("shut").innerHTML="1";draw();}if (event.key === ']') {parent.document.getElementById("shut").innerHTML="2";draw();}});
    function draw(){
        let rec, ccanvas, mh, mw, tcanv, imgwid, img, hi, sht, lens, wi, cwi;
        ccanvas=document.getElementById('circle');
    tcanv=document.getElementById("tcan");
    hi=parent.document.getElementById("ihig").innerHTML;
    wi=parent.document.getElementById("iwid").innerHTML;
    rec=parent.window.innerWidth;
    rec=Math.round(rec);
    document.getElementById('circle').width=rec;
    document.getElementById('circle').height=hi;
        let ctx = ccanvas.getContext('2d');
        let tctx = tcanv.getContext('2d');
        let rr=(hi/2);
    rr=Math.round(rr);
    mh=0;
    mw=((rec-hi)/2) + rr;
    mw=Math.round(mw);
    Math.round(mh);
    tcanv.height=hi;
    imgwid=((hi/1080)*1920);
    Math.round(imgwid);
    tcanv.width=rec;
    sht=parent.document.getElementById("shut").innerHTML;
    lens=document.getElementById("lens").innerHTML;
    function shutter(sim) {
    ctx.beginPath();
    ctx.arc(mw, rr, sim, 0, 2 * Math.PI, false);
    ctx.fill();}

        if (!ccanvas.getContext) {
            return;
        }
        tcanv.style.imageRendering='pixelated';
        ccanvas.style.imageRendering='pixelated';
        img = document.getElementById("frm");
        tctx.imageSmoothingEnabled = false;
        ctx.globalCompositeOperation = 'source-over';
        tctx.drawImage(img, 0, 0, 1920, 1080, 0, 0, rec, hi);
        ctx.imageSmoothingEnabled = false;
        ctx.beginPath();
        ctx.fillStyle = "black";
        cwi = Math.max(hi, wi);
        ctx.fillRect(0, 0, cwi, parent.window.innerHeight);
        ctx.fillStyle = ctx.createPattern(tcanv, 'no-repeat');
        ctx.beginPath();
        ctx.fillRect(0, 0, rec, hi);
        ctx.globalCompositeOperation = 'destination-out';
        shutter(rr);
        ctx.globalCompositeOperation = 'source-over';
        ctx.fillStyle = "grey";
        shutter(rr);
        if (sht !== "1") {
            if (lens !== "2") {
                function op(sizz) {
                    ctx.globalCompositeOperation = 'source-over';
                    ctx.fillStyle = rgba(168, 168, 168, 1);
                    shutter(rr);
                    ctx.globalCompositeOperation = 'destination-out';
                    shutter(sizz);
                }

                for (let sizz = 0; sizz < rr; sizz = sizz + 1) {
                    setTimeout(function () {
                        op(sizz);
                    }, 2);
                }
                document.getElementById('lens').innerHTML = "2";
            }
            ctx.globalCompositeOperation = 'destination-out';
            shutter(rr);
            ctx.globalCompositeOperation = 'source-over';
            ctx.fillStyle = rgba(168, 168, 168, 0.3);
            shutter(rr-1);
        }
        if (sht !== "2") {
            if (lens !== "1") {
                function clo(sizz) {
                    ctx.globalCompositeOperation = 'source-over';
                    ctx.fillStyle = "grey";
                    shutter(rr);
                    ctx.globalCompositeOperation = 'destination-out';
                    shutter(rr - sizz);
                }

                for (let sizz = 0; sizz < rr; sizz = sizz + 1) {
                    setTimeout(function () {
                        clo(sizz);
                    }, 2);
                }
                document.getElementById('lens').innerHTML = "1";
            }
            ctx.globalCompositeOperation = 'source-over';
            ctx.fillStyle = "grey";
            shutter(0);
        }
    }
    draw();
    parent.document.getElementById('di').addEventListener('click', function() {draw();});