🎨 全画面落書きブックマークレット

doodle.js

(() => {
  const retina = 2;
  const lineWidth = 7;
  const scratchCanvas = document.querySelector('.scratch-canvas');
  if (scratchCanvas) {
    scratchCanvas.style['display'] = scratchCanvas.style['display'] === 'none' ? '' : 'none';
  } else {
    const canvas = document.createElement('canvas');
    canvas.setAttribute('class', 'scratch-canvas');
    canvas.width = document.documentElement.scrollWidth * retina;
    canvas.height = document.documentElement.scrollHeight * retina;
    canvas.style.cssText = `position: absolute; top: 0; left: 0; width: ${canvas.width / retina}px; height: ${canvas.height / retina}px; z-index: 65535;`;
    document.body.appendChild(canvas);
    const context = canvas.getContext('2d');
    context.lineCap = 'round';
    context.lineJoin = 'round';
    let pointerIsDown = false;
    let previousX = 0;
    let previousY = 0;
    canvas.addEventListener('pointerdown', e => {
      pointerIsDown = true;
      previousX = e.offsetX * retina;
      previousY = e.offsetY * retina;
    });
    canvas.addEventListener('pointerup', () => {
      pointerIsDown = false;
    });
    canvas.addEventListener('pointermove', e => {
      if (!pointerIsDown) return;
      context.beginPath();
      context.moveTo(previousX, previousY);
      context.lineTo(e.offsetX * retina, e.offsetY * retina);
      context.globalCompositeOperation = 'destination-over';
      context.lineWidth = lineWidth * retina;
      context.strokeStyle = '#ffffff';
      context.stroke();
      context.globalCompositeOperation = 'source-over';
      context.lineWidth = lineWidth;
      context.strokeStyle = '#ff0000';
      context.stroke();
      previousX = e.offsetX * retina;
      previousY = e.offsetY * retina;
    });
  }
})();

ブックマークレット本体はこちら。

javascript: (()=>{const e=document.querySelector(".scratch-canvas");if(e)e.style.display="none"===e.style.display?"":"none";else{const e=document.createElement("canvas");e.setAttribute("class","scratch-canvas"),e.width=2*document.documentElement.scrollWidth,e.height=2*document.documentElement.scrollHeight,e.style.cssText=`position: absolute; top: 0; left: 0; width: ${e.width/2}px; height: ${e.height/2}px; z-index: 65535;`,document.body.appendChild(e);const t=e.getContext("2d");t.lineCap="round",t.lineJoin="round";let o=!1,n=0,s=0;e.addEventListener("pointerdown",e=>{o=!0,n=2*e.offsetX,s=2*e.offsetY}),e.addEventListener("pointerup",()=>{o=!1}),e.addEventListener("pointermove",e=>{o&&(t.beginPath(),t.moveTo(n,s),t.lineTo(2*e.offsetX,2*e.offsetY),t.globalCompositeOperation="destination-over",t.lineWidth=14,t.strokeStyle="#ffffff",t.stroke(),t.globalCompositeOperation="source-over",t.lineWidth=7,t.strokeStyle="#ff0000",t.stroke(),n=2*e.offsetX,s=2*e.offsetY)})}})(); void 0;

• 起動するたびに表示／非表示を切替
• Retina 対応（ 2 倍）
• 縁取りあり