Skip to content

Instantly share code, notes, and snippets.

@BlainMaguire

BlainMaguire/whiteboard.js

Last active June 2, 2017 13:44
Show Gist options
  • Save BlainMaguire/839e79d44d02dcf45efda0a103ae6991 to your computer and use it in GitHub Desktop.
Save BlainMaguire/839e79d44d02dcf45efda0a103ae6991 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
whiteboard.js
data:text/html,<body style=margin:0><canvas id=c><script>var a,d=document,e=c.getContext("2d");c.width=innerWidth;c.height=innerHeight;e.lineWidth=9;e.lineJoin=e.lineCap="round";d.onmousedown=function(b){e.beginPath();a=!e.moveTo(b.clientX,b.clientY)};d.onmousemove=function(b){return a&&(e.lineTo(b.clientX,b.clientY),e.stroke())};d.onmouseup=function(){return a=0};d.onkeyup=function(b){switch(b.keyCode){case 32:e.strokeStyle=prompt("Enter new colour",e.strokeStyle);case 189:e.lineWidth--;break;case 187:e.lineWidth++}};</script>
@BlainMaguire
Copy link
Author

BlainMaguire commented Jun 2, 2017 •
edited

Instant Whiteboard Anywhere

Paste into browser address bar to get a whiteboard.

Left click and drag will draw.
Space will prompt you to change colour.
'-' and '=' keys will make the stroke size bigger or smaller.
Right click to copy to the clipboard or save as an image.

You can also create a 'notepad' by pasting the following into your browser:

data:text/html, <html contenteditable>

Both can be added to your browser bookmarks so you can use them at your convenience.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment