Drawing Bookmarklet
Usage
To add the bookmarklet to your bookmark bar, drag either of the following two links onto your bookmark bar:
(Enable the bookmark bar with Ctrl + Shift + B if it's disabled)
Direct Script: Drawing
{document.sdmcd=!document.sdmcd;let e,t,n,d,o,c,a,s=5,l="#FF0000",r=!1,m=!1,u=!1,p=!1,h=[],g=[],b=[],f=!1;function w(){I(),document.sdmcdKeyAborter.abort(),document.getElementById("sdmcd-canvas")?.remove(),document.getElementById("sdmcd-popup-bg")?.remove()}function y(e){e.preventDefault()}function F(e){document.getElementById("sdmcd-popup-bg")||(0!==e.button&&void 0!==e.button||(a.lineWidth=s,a.globalCompositeOperation="source-over",C(),r=!0),2===e.button&&(a.lineWidth=Math.max(s,30),f?(a.fillStyle="#FFFFFF",a.strokeStyle="#FFFFFF",a.globalCompositeOperation="source-over"):a.globalCompositeOperation="destination-out",m=!0,D()),(r||m)&&(h.push({data:a.getImageData(0,0,c.width,c.height)}),g=[],b.push({x:e.clientX,y:e.clientY})))}function v(e){x(e),r&&(r=!1),m&&(m=!1,n.classList.add("sdmcd-fading")),b=[]}function x(d){if(n){let e=s;n.classList.contains("sdmcd-erasing")&&(e=Math.max(s,30)),n.style.top=d.clientY-e/2-1+"px",n.style.left=d.clientX-e/2-1+"px"}e=d.clientX,t=d.clientY,(r||m)&&(b.push({x:d.clientX,y:d.clientY}),function(){const e=h[h.length-1].data;if(a.putImageData(e,0,0),b.length<4){var t=b[0];a.beginPath(),a.arc(t.x,t.y,a.lineWidth/2,0,2*Math.PI,!0),a.closePath(),a.fill()}else{for(a.beginPath(),a.moveTo(b[0].x,b[0].y),i=1;i<b.length-2;i++){const e=(b[i].x+b[i+1].x)/2,t=(b[i].y+b[i+1].y)/2;a.quadraticCurveTo(b[i].x,b[i].y,e,t)}a.quadraticCurveTo(b[i].x,b[i].y,b[i+1].x,b[i+1].y),a.stroke()}}())}function k(e){e.preventDefault(),o&&document.body.contains(o)||(e.deltaY>0?s-=1:s+=1,s<1&&(s=1),a.lineWidth=s,D())}function E(e){e.preventDefault()}function C(){a.strokeStyle=l,a.fillStyle=l}function L(e){f=!f,a.globalCompositeOperation="source-over",f?(e&&h.push({switch:!0,data:a.getImageData(0,0,c.width,c.height)}),a.fillStyle="#FFFFFF",a.fillRect(0,0,c.width,c.height),l="#000000",C()):(e&&h.push({switch:!0,data:a.getImageData(0,0,c.width,c.height)}),l="#FF0000",C(),a.clearRect(0,0,c.width,c.height))}function A(){document.sdmcdMouseAborter=new AbortController,window.addEventListener("contextmenu",y,{signal:document.sdmcdMouseAborter.signal}),window.addEventListener("pointerdown",F,{signal:document.sdmcdMouseAborter.signal}),window.addEventListener("pointerup",v,{signal:document.sdmcdMouseAborter.signal}),window.addEventListener("pointermove",x,{signal:document.sdmcdMouseAborter.signal}),window.addEventListener("dragstart",E,{signal:document.sdmcdMouseAborter.signal}),window.addEventListener("wheel",k,{passive:!1,signal:document.sdmcdMouseAborter.signal}),document.body.style.touchAction="none"}function I(){document.sdmcdMouseAborter.abort(),document.body.style.touchAction="auto"}function D(){n||(n=document.createElement("div"),n.id="sdmcd-brush-outline",document.body.appendChild(n)),n.classList.remove("sdmcd-fading"),m||n.classList.remove("sdmcd-erasing"),clearTimeout(d);let o=s;m&&(o=Math.max(s,30),n.classList.add("sdmcd-erasing")),n.style.top=t-o/2-1+"px",n.style.left=e-o/2-1+"px",n.style.width=o+"px",n.style.height=o+"px",m||(d=setTimeout((()=>{n.classList.add("sdmcd-fading")}),500))}function M(){const e=document.createElement("div");e.id="sdmcd-popup-bg",e.addEventListener("click",(t=>{t.target==e&&e.remove()}));const t=document.createElement("div");return t.id="sdmcd-popup-content",e.appendChild(t),document.body.appendChild(e),o=e,console.log(o),t}document.sdmcd?(!function(){if(document.getElementById("sdmcd-css"))return;const e=document.createElement("style");e.id="sdmcd-css",e.innerHTML="#sdmcd-canvas{position:fixed;top:0;left:0;z-index:9999997;cursor:crosshair}#sdmcd-popup-bg{position:fixed;top:0;left:0;z-index:9999999;width:100vw;height:100vh;background-color:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;font-size:1vw;color:#fff;font-family:Helvetica,sans-serif}#sdmcd-popup-content{display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none}#sdmcd-popup-content.sdmcd-horizontal{flex-direction:row}.sdmcd-help-section{display:flex;flex-direction:column;justify-content:center;align-items:center;width:35em}.sdmcd-help-line{font-size:1.5em;height:1.6em;margin:0;color:#fff}#sdmcd-color-content{font-size:2em;display:flex;flex-direction:column;align-items:center;gap:.2em}#sdmcd-color{width:20em;height:20em;border-radius:1em;padding:0;border:none;outline:0;cursor:pointer;pointer-events:auto}#sdmcd-color::-webkit-color-swatch-wrapper{padding:0}#sdmcd-color::-webkit-color-swatch{border:none;border-radius:.5em}#sdmcd-brush-outline{position:fixed;border-radius:50%;border:1px solid #888;pointer-events:none;z-index:9999998}#sdmcd-brush-outline.sdmcd-fading{opacity:0;transition:opacity .5s}",document.head.appendChild(e)}(),c=document.createElement("canvas"),c.id="sdmcd-canvas",c.width=window.innerWidth,c.height=window.innerHeight,document.body.appendChild(c),a=c.getContext("2d",{willReadFrequently:!0}),a.lineWidth=s,a.lineJoin="round",a.lineCap="round",C(),A(),document.sdmcdKeyAborter=new AbortController,window.addEventListener("keydown",(function(e){let t,n=!0;switch(e.key){case"Escape":document.getElementById("sdmcd-popup-bg")?document.getElementById("sdmcd-popup-bg").remove():(document.sdmcd=!1,w());break;case"e":h.push({data:a.getImageData(0,0,c.width,c.height)}),f?(a.fillStyle="#FFFFFF",a.fillRect(0,0,c.width,c.height),C()):a.clearRect(0,0,c.width,c.height),g=[];break;case"s":if(e.ctrlKey){const e=c.toDataURL("image/png"),t=document.createElement("a");t.href=e,t.download="drawing.png",t.click()}else s=5,a.lineWidth=5,D();break;case"w":l="#FFFFFF";break;case"b":l="#000000";break;case"r":l="#FF0000";break;case"g":l="#00FF00";break;case"l":l="#0000FF";break;case"o":l="#FFA500";break;case"p":l="#800080";break;case"m":l="#FF00FF";break;case"a":l="#00FFFF";break;case"c":t=document.getElementById("sdmcd-popup-bg"),t?t.remove():function(){const e=M(),t=document.createElement("div");t.id="sdmcd-color-content",e.appendChild(t);const n=document.createElement("input");n.id="sdmcd-color",n.type="color",n.value=l,n.addEventListener("change",(e=>{l=e.target.value,C()})),t.textContent="Color:",t.appendChild(n)}();break;case"ArrowUp":s+=1,a.lineWidth=s,D();break;case"ArrowDown":s-=1,s<1&&(s=1),a.lineWidth=s,D();break;case"f":u=!u,u?(p=!1,c.style.display="block",c.style.pointerEvents="none",I()):(c.style.pointerEvents="auto",A());break;case"F1":p=!p,p?(u=!1,c.style.pointerEvents="none",c.style.display="none",I()):(c.style.pointerEvents="auto",c.style.display="block",A());break;case"z":if(e.ctrlKey){const e=a.getImageData(0,0,c.width,c.height),t=h.pop();if(!t)break;t.switch&&L(!1),a.putImageData(t.data,0,0),g.push({data:e,switch:t.switch})}break;case"y":if(!e.ctrlKey){l="#FFFF00";break}{const e=a.getImageData(0,0,c.width,c.height),t=g.pop();if(!t)break;t.switch&&L(!1),a.putImageData(t.data,0,0),h.push({data:e,switch:t.switch})}break;case"t":L(!0);break;case"h":t=document.getElementById("sdmcd-popup-bg"),t?t.remove():function(){const e=M(),t=["General:","E - Erase the canvas","Esc - Close modal / Exit drawing mode","","↑ / Scroll up - Increase brush size","↓ / Scroll down - Decrease brush size","S - Reset brush size","","Ctrl + Z - Undo","Ctrl + Y - Redo","T - Toggle between overlay and whiteboard mode","F - Focus page content without hiding drawing","F1 - Hide drawing and focus page content","Ctrl + S - Save drawing as image","","H - Open this help menu"],n=["Colors:","C - Open color picker","","W - White","B - Black","","R - Red","G - Green","L - Blue","","Y - Yellow","O - Orange","P - Purple","M - Magenta","A - Aqua"],d=document.createElement("div");d.classList.add("sdmcd-help-section"),e.appendChild(d);const o=document.createElement("div");o.classList.add("sdmcd-help-section"),e.appendChild(o);for(const e of t){const t=document.createElement("p");t.textContent=e,t.classList.add("sdmcd-help-line"),d.appendChild(t)}for(const e of n){const t=document.createElement("p");t.textContent=e,t.classList.add("sdmcd-help-line"),o.appendChild(t)}e.classList.add("sdmcd-horizontal")}();break;default:n=!1}C(),n&&e.preventDefault()}),{capture:!0,signal:document.sdmcdKeyAborter.signal})):w()}();void 0;){kind=link}
Remote Script: Drawing
Which one to choose?
The direct script puts the entire script in your bookmark, while the remote script fetches it from a remote repository every time. The remote one will take ~200ms to load, won't work offline and will consume broadband, but will take up less space in your browser account. However, since the minified script is >5kb, the direct script might not work on some browsers. In general, I would recommend using the direct script, and if it doesn't work, using the remote one.
More info about the bookmarklet, including features and security, can be found at: https://github.com/SimonDMC/drawing-bookmarklet