russianryebread/cursor.png

## cursor.png
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABgWlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz8zQ8RMiIWFxUtYDflRExtlJJSkMcpgM/PMDzVv5vXemyRbZTtFiY1fC/4CtspaKSIlCytrYoOe8zw1kjm3c8/nfu89p3vPBW80q2pmRTdoOcuIjIaV2dicUvWInwYq6SUQV019aGpqgrL2doPHiVedTq3y5/612sWkqYKnWnhQ1Q1LeEx4YtnSHd4UblIz8UXhY+GgIRcUvnb0hMtPDqdd/nDYiEaGwVsvrKR/ceIXqxlDE5aX06ZlC+rPfZyX+JO5mWmJreItmEQYJYzCOCMME6KHAZlDdEp/umRFmfzu7/xJ8pKryqyzgsESaTJYBEUtSPWkxJToSRlZVpz+/+2rmerrdav7w1D5YNsv7VC1AZ9F237ft+3PA/Ddw1mulJ/fg/5X0YslrW0X6tbg5LykJbbgdB2a7/S4Ef+WfOLeVAqejyAQg8ZLqJl3e/azz+EtRFflqy5gewc65HzdwhdEiWfWzqHdKwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAA3NJREFUWIW11m9MG2UcwPHvtde7Ky1MMuMLQtFXiwuMwVJRNzWD4Mb/UWKMiW81vvOFL4ElvhBQ3/lib0xm4htjohulGGPc4gZjpWywfyYmEg3/shfTOFeEPr1b2/NFr10LbVlp+yT36rnc5/t77ppUMk2TSi+nqjiBr4FW4B2hG0vpTdM0K3ppiqNKUxyXuryN5sjQG6amOB5qiuNYal+u8ORVwPTJ5kMd377bgmqTkG1S7WeB4GWnqnQK3bglVeoVpPC3Tx7uONd7BBkpvTcxu8Hn08F/gc6KBFj4D68fe759clhH2TxM/J/nsu75+MoaX/wY+sNWIXz6tdaG9slhnSqXjuPFEHLd3+l7wkaC+T8fANwr6wlk4B3+EYMql450IAqSCY8dGMtexMNnGTi/yI3fV34B+sv2EVp44EROXCbxSEFUL/PeV/fTuNCNSFlOwPqdB060NnRODsdwu8UOXGUrqjLwiZ2FextXgD6hGxGAkr+BFH68JQ8e3oX3p/CSAzJx/0geXKicSeJXLXw78xn7DrDwqTTuiubEB8fshJJ430583wEW7j/e0vDmE1xk4dtRFd+4zPzdjZl8+L4CnKqiAZOvHvWcysJt2fjgmEzwzvos0JsPLzrAwv2vNHtO+0fiT4P3FMKLCsjEp0bjVLsL4tfYY/KiAlLHXgTeI3Rj62mevWeAhV98udnTlQ8XugPfuEzwzvpcMfieASm87Yine2okkRc/M6Zw/fb6HNBdDF4wwKkqKnChram+OzCaoKZa5MQHk/h1ipy8YICFX2xrqu8JnDXz4r5xlbkk3i10479i8ZwBqclf2gMfmlC5dmstWAq+KyAD750apSA+u7QWBLpKwbMCLPx7b2MSf6YmsgvXjTQ+T4mTZwU4VcUOfOdtrO8LnN2Bx57gvvE03iV0Y7NUPB0A9L5Qd7D/3AfabvyRhU9ozCythcqJZwa81d5Ui0vEtiRnPJYTX1wNAafLiQPYnKqiAAO+oxKemojbWNb+IqI+TuFDn2rMLK4uUObJU0sG2jVFPhAWUgKwkTDrVpZqN2M1dvnD83Hp6s3VBZKTh8uNA0ia4vgSeB/gwkeH4gddcbv/rp2ffw3z28qDG8CpSuGpgPtAHYDbqbIdNYRpmpeAAPCN0A1RKRySr+Am4AV+2hJ6ALic+a+10ut/3j19l+BJ0CMAAAAASUVORK5CYII=

## doodl.html
<html>
    <head>
        <title>Doozle</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style type="text/css">
            * { margin: 0; padding: 0; }
            body { background: transparent; }
            #canvas { cursor: url(cursor.png) 0 31, auto; }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script type="text/javascript">
            var LINE_COLOR = "#99e265"
            var LINE_WIDTH = 6
            var CLEAR_DELAY_SECONDS = 1

            var canvas = document.getElementById("canvas")
            var ctx = canvas.getContext("2d")

            window.addEventListener("load", init)
            window.addEventListener("resize", resize)

            function init() {
                var painting = false
                var lastX = 0
                var lastY = 0

                resize()

                canvas.addEventListener('mousedown', paint)
                canvas.addEventListener('mousemove', draw)
                canvas.addEventListener('mouseup', reset)
                canvas.addEventListener('mouseout', reset)

                function paint(event) {
                    painting = true
                    lastX = event.pageX - this.offsetLeft
                    lastY = event.pageY - this.offsetTop
                }

                function draw(event) {
                    if (!painting) return

                    mouseX = event.pageX - this.offsetLeft
                    mouseY = event.pageY - this.offsetTop

                    ctx.beginPath()
                    ctx.moveTo(lastX, lastY)
                    ctx.lineTo(mouseX, mouseY)
                    ctx.lineWidth = LINE_WIDTH
                    ctx.lineJoin = "round"
                    ctx.lineCap = "round"
                    ctx.strokeStyle = LINE_COLOR
                    ctx.stroke()

                    lastX = mouseX
                    lastY = mouseY
                }

                function reset(event) {
                    painting = false
                    setTimeout(() => {
                        if (painting) return
                        ctx.clearRect(0, 0, canvas.width, canvas.height)
                    }, (CLEAR_DELAY_SECONDS * 1000))
                }
            }

        function resize() {
            canvas.width = window.innerWidth
            canvas.height = window.innerHeight

            if (window.devicePixelRatio > 1) {
                var canvasWidth = canvas.width;
                var canvasHeight = canvas.height;

                canvas.width = canvasWidth * window.devicePixelRatio;
                canvas.height = canvasHeight * window.devicePixelRatio;
                canvas.style.width = canvasWidth;
                canvas.style.height = canvasHeight;

                ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
            }
        }
        </script>
    </body>
</html>
	<html>
	<head>
	<title>Doozle</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style type="text/css">
	* { margin: 0; padding: 0; }
	body { background: transparent; }
	#canvas { cursor: url(cursor.png) 0 31, auto; }
	</style>
	</head>
	<body>
	<canvas id="canvas"></canvas>
	<script type="text/javascript">
	var LINE_COLOR = "#99e265"
	var LINE_WIDTH = 6
	var CLEAR_DELAY_SECONDS = 1

	var canvas = document.getElementById("canvas")
	var ctx = canvas.getContext("2d")

	window.addEventListener("load", init)
	window.addEventListener("resize", resize)

	function init() {
	var painting = false
	var lastX = 0
	var lastY = 0

	resize()

	canvas.addEventListener('mousedown', paint)
	canvas.addEventListener('mousemove', draw)
	canvas.addEventListener('mouseup', reset)
	canvas.addEventListener('mouseout', reset)

	function paint(event) {
	painting = true
	lastX = event.pageX - this.offsetLeft
	lastY = event.pageY - this.offsetTop
	}

	function draw(event) {
	if (!painting) return

	mouseX = event.pageX - this.offsetLeft
	mouseY = event.pageY - this.offsetTop

	ctx.beginPath()
	ctx.moveTo(lastX, lastY)
	ctx.lineTo(mouseX, mouseY)
	ctx.lineWidth = LINE_WIDTH
	ctx.lineJoin = "round"
	ctx.lineCap = "round"
	ctx.strokeStyle = LINE_COLOR
	ctx.stroke()

	lastX = mouseX
	lastY = mouseY
	}

	function reset(event) {
	painting = false
	setTimeout(() => {
	if (painting) return
	ctx.clearRect(0, 0, canvas.width, canvas.height)
	}, (CLEAR_DELAY_SECONDS * 1000))
	}
	}

	function resize() {
	canvas.width = window.innerWidth
	canvas.height = window.innerHeight

	if (window.devicePixelRatio > 1) {
	var canvasWidth = canvas.width;
	var canvasHeight = canvas.height;

	canvas.width = canvasWidth * window.devicePixelRatio;
	canvas.height = canvasHeight * window.devicePixelRatio;
	canvas.style.width = canvasWidth;
	canvas.style.height = canvasHeight;

	ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
	}
	}
	</script>
	</body>
	</html>