911992/js_event_dispatch_blocking_test.html

## js_event_dispatch_blocking_test.html
<!DOCTYPE html>

<!--
Created on Dec 9, 2020 at 2:53 PM -0800
https://github.com/911992
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body style="margin: 0px;padding: 0px">
        <div style="position: absolute;right:0;border: 1px solid gray;background-color: bisque;z-index: 911">
            <div id="hid" style="display: none"></div>
            Async call?<input id="asyncc" type="checkbox" checked="checked"/><br/>
            <button id="clsbtn">clear</button>
        </div>
        <div id="container" style="position: absolute;width: 100%;height: 100%">
            <canvas id="canvas" style="width: 100%;height: 100%">

            </canvas>
        </div>
        <script>
            var pixel_r = window.devicePixelRatio;
            var container = document.getElementById("container");
            var hidc = document.getElementById("hid");
            var w = container.scrollWidth;
            var h = container.scrollHeight;
            var canvas = document.getElementById("canvas");
            var g2 = canvas.getContext("2d");
            canvas.width = w * pixel_r;
            canvas.height = h * pixel_r;
            const DELAY = true;
            var busy = false;
            var loop_c = 1024;
            var async_check = document.getElementById("asyncc");
            canvas.addEventListener("mousemove",function(evt){
                console.log("mouse move evnt, x:"+evt.x + " , y:"+evt.y+ " busy: "+busy);
                if(busy){
                    return;
                }
                busy = true;
                if(async_check.checked){
                    setTimeout(function(){paint_dot(evt)},1);
                }else{
                    paint_dot(evt);
                }

            });
            document.getElementById("clsbtn").addEventListener("click",clear);
            function paint_dot(evt){
                busy = true;
                if(DELAY){
                    for(var a =0 ;a <loop_c;a++){
                        var e = document.createElement("span");
                        e.innerHTML = a+"--";
                        hidc.appendChild(e);
                        e.parentNode.removeChild(e);
                    }
                }
                g2.fillStyle = "#000000";
                g2.fillRect(evt.x*pixel_r,evt.y*pixel_r,3*pixel_r,3*pixel_r);
                busy = false;
            }
            function clear(){
                console.log("clearing");
                g2.fillStyle = "#ffffff";
                g2.fillRect(0,0,canvas.width,canvas.height);
            }
        </script>
    </body>
</html>
	<!DOCTYPE html>

	<!--
	Created on Dec 9, 2020 at 2:53 PM -0800
	https://github.com/911992
	-->
	<html>
	<head>
	<title>TODO supply a title</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body style="margin: 0px;padding: 0px">
	<div style="position: absolute;right:0;border: 1px solid gray;background-color: bisque;z-index: 911">
	<div id="hid" style="display: none"></div>
	Async call?<input id="asyncc" type="checkbox" checked="checked"/><br/>
	<button id="clsbtn">clear</button>
	</div>
	<div id="container" style="position: absolute;width: 100%;height: 100%">
	<canvas id="canvas" style="width: 100%;height: 100%">

	</canvas>
	</div>
	<script>
	var pixel_r = window.devicePixelRatio;
	var container = document.getElementById("container");
	var hidc = document.getElementById("hid");
	var w = container.scrollWidth;
	var h = container.scrollHeight;
	var canvas = document.getElementById("canvas");
	var g2 = canvas.getContext("2d");
	canvas.width = w * pixel_r;
	canvas.height = h * pixel_r;
	const DELAY = true;
	var busy = false;
	var loop_c = 1024;
	var async_check = document.getElementById("asyncc");
	canvas.addEventListener("mousemove",function(evt){
	console.log("mouse move evnt, x:"+evt.x + " , y:"+evt.y+ " busy: "+busy);
	if(busy){
	return;
	}
	busy = true;
	if(async_check.checked){
	setTimeout(function(){paint_dot(evt)},1);
	}else{
	paint_dot(evt);
	}

	});
	document.getElementById("clsbtn").addEventListener("click",clear);
	function paint_dot(evt){
	busy = true;
	if(DELAY){
	for(var a =0 ;a <loop_c;a++){
	var e = document.createElement("span");
	e.innerHTML = a+"--";
	hidc.appendChild(e);
	e.parentNode.removeChild(e);
	}
	}
	g2.fillStyle = "#000000";
	g2.fillRect(evt.xpixel_r,evt.ypixel_r,3pixel_r,3pixel_r);
	busy = false;
	}
	function clear(){
	console.log("clearing");
	g2.fillStyle = "#ffffff";
	g2.fillRect(0,0,canvas.width,canvas.height);
	}
	</script>
	</body>
	</html>