Skip to content

Instantly share code, notes, and snippets.

@russianryebread
Created December 19, 2018 03:16
Show Gist options
  • Save russianryebread/7f2a250ab8ffa95f56e6cc808882aba5 to your computer and use it in GitHub Desktop.
Save russianryebread/7f2a250ab8ffa95f56e6cc808882aba5 to your computer and use it in GitHub Desktop.
Doodl
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=
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment