https://phildecroos.com/whiteboard/whiteboard.js

1const cvs = document.getElementById("whiteboard");
2const ctx = cvs.getContext("2d");
3
4cvs.height = window.innerHeight - 0;
5cvs.width = window.innerWidth - 0;
6
7function drawRect(x, y, width, height, color) {
8    ctx.fillStyle = color;
9    ctx.fillRect(x, y, width, height);
10}
11
12var thick = 12;
13var medium = 6;
14var thin = 2;
15
16var black = "#000000";
17var red = "#ff2222";
18var orange = "#ff8c00";
19var yellow = "#ffd700";
20var green = "#118111";
21var blue = "#1e90ff";
22var purple = "#550099";
23
24function clear() {
25    drawRect(0, 0, cvs.width, cvs.height, "white")
26}
27
28clear();
29
30const pen = {
31    x: 0,
32    y: 0,
33    size: medium,
34    color: black
35}
36
37var recentColor = pen.color;
38var recentSize = pen.size;
39
40document.getElementById("thick").onclick = function () { changePen(thick, recentColor); set1 = true; set2 = false; set3 = false; };
41document.getElementById("medium").onclick = function () { changePen(medium, recentColor); set1 = false; set2 = true; set3 = false; };
42document.getElementById("thin").onclick = function () { changePen(thin, recentColor); set1 = false; set2 = false; set3 = true; };
43
44document.getElementById("eraser").onclick = function () { changePen(20, "white") };
45
46document.getElementById("black").onclick = function () { changePen(recentSize, black); set6 = true; set7 = false; set8 = false; set9 = false; set10 = false; set11 = false; set12 = false; };
47document.getElementById("red").onclick = function () { changePen(recentSize, red); set6 = false; set7 = true; set8 = false; set9 = false; set10 = false; set11 = false; set12 = false; };
48document.getElementById("orange").onclick = function () { changePen(recentSize, orange); set6 = false; set7 = false; set8 = true; set9 = false; set10 = false; set11 = false; set12 = false; };
49document.getElementById("yellow").onclick = function () { changePen(recentSize, yellow); set6 = false; set7 = false; set8 = false; set9 = true; set10 = false; set11 = false; set12 = false; };
50document.getElementById("green").onclick = function () { changePen(recentSize, green); set6 = false; set7 = false; set8 = false; set9 = false; set10 = true; set11 = false; set12 = false; };
51document.getElementById("blue").onclick = function () { changePen(recentSize, blue); set6 = false; set7 = false; set8 = false; set9 = false; set10 = false; set11 = true; set12 = false; };
52document.getElementById("purple").onclick = function () { changePen(recentSize, purple); set6 = false; set7 = false; set8 = false; set9 = false; set10 = false; set11 = false; set12 = true; };
53
54document.getElementById("clear").onclick = function () { clear() };
55
56function changePen(size, color) {
57    // if changing to an eraser, save the size and color before the change
58    if (color == "white") {
59        recentColor = pen.color;
60        recentSize = pen.size;
61        set4 = true;
62
63        set1 = false;
64        set2 = false;
65        set3 = false;
66        set6 = false;
67        set7 = false;
68        set8 = false;
69        set9 = false;
70        set10 = false;
71        set11 = false;
72        set12 = false;
73        set13 = false;
74        set14 = false;
75    }
76    // if not changing to an eraser, update the size and color to be the values after the change
77    else {
78        if (recentColor == color) {
79            if (color == black) {
80                set6 = true; set7 = false; set8 = false; set9 = false; set10 = false; set11 = false; set12 == false;
81            }
82            else if (color == red) {
83                set6 = false; set7 = true; set8 = false; set9 = false; set10 = false; set11 = false; set12 == false;
84            }
85            else if (color == orange) {
86                set6 = false; set7 = false; set8 = true; set9 = false; set10 = false; set11 = false; set12 == false;
87            }
88            else if (color == yellow) {
89                set6 = false; set7 = false; set8 = false; set9 = true; set10 = false; set11 = false; set12 == false;
90            }
91            else if (color == green) {
92                set6 = false; set7 = false; set8 = false; set9 = false; set10 = true; set11 = false; set12 == false;
93            }
94            else if (color == blue) {
95                set6 = false; set7 = false; set8 = false; set9 = false; set10 = false; set11 = true; set12 == false;
96            }
97            else if (color == purple) {
98                set6 = false; set7 = false; set8 = false; set9 = false; set10 = false; set11 = false; set12 == true;
99            }
100        }
101        if (recentSize == size) {
102            if (size == thick) {
103                set1 = true; set2 = false; set3 = false;
104            }
105            else if (size == medium) {
106                set1 = false; set2 = true; set3 = false;
107            }
108            else if (size == thin) {
109                set1 = false; set2 = false; set3 = true;
110            }
111        }
112
113        recentColor = color;
114        recentSize = size;
115        set4 = false;
116    }
117
118    pen.size = size;
119    pen.color = color;
120}
121
122var drawing = false;
123
124cvs.addEventListener("mousedown", (event) => {
125    drawing = true;
126    update(event);
127});
128
129cvs.addEventListener("mouseup", () => {
130    drawing = false;
131    ctx.beginPath();
132});
133
134function update(event) {
135    if (event.clientX < 163 || event.clientX > window.innerWidth - 3 || event.clientY < 3 || event.clientY > window.innerHeight - 3) {
136        drawing = false;
137        ctx.beginPath();
138    }
139    if (drawing) {
140        ctx.lineWidth = pen.size;
141        ctx.lineCap = "round";
142        ctx.lineTo(event.clientX, event.clientY);
143        ctx.strokeStyle = pen.color;
144        ctx.stroke();
145    }
146}
147
148cvs.addEventListener("mousemove", update);
149
150window.addEventListener("resize", () => {
151    cvs.height = window.innerHeight - 0;
152    cvs.width = window.innerWidth - 0;
153    clear();
154});