reported/notebook.html at main · petry078/reported · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reported Notebook</title>
</head>
<body style="background-color: #0d1117;">


  <script>
    // create canvas element and append it to document body
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);

    document.body.style.margin = 0;
    canvas.style.position = 'fixed';

    var ctx = canvas.getContext('2d');
    var offscreenCanvas = document.createElement('canvas');
    var offscreenCtx = offscreenCanvas.getContext('2d');
    resize();

    var pos = { x: 0, y: 0 };

    window.addEventListener('resize', resize);
    document.addEventListener('mousemove', draw);
    document.addEventListener('mousedown', setPosition);
    document.addEventListener('mouseenter', setPosition);

    function setPosition(e) {
      pos.x = e.clientX;
      pos.y = e.clientY;
    }

    function resize() {
      // Save the current canvas content
      offscreenCanvas.width = ctx.canvas.width;
      offscreenCanvas.height = ctx.canvas.height;
      offscreenCtx.drawImage(ctx.canvas, 0, 0);

      // Resize the main canvas
      ctx.canvas.width = window.innerWidth;
      ctx.canvas.height = window.innerHeight;

      // Restore the saved content
      ctx.drawImage(offscreenCanvas, 0, 0);
    }

    function draw(e) {
      if (e.buttons !== 1) return;

      ctx.beginPath();
      ctx.lineWidth = 5;
      ctx.lineCap = 'round';
      ctx.strokeStyle = 'white';

      ctx.moveTo(pos.x, pos.y);
      setPosition(e);
      ctx.lineTo(pos.x, pos.y);

      ctx.stroke();
    }


  </script>

</body>
</html>