Scratch Pad
Simple scratch pad written in Javascript.
HTML
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 <title>Scratch Pad</title>
6 <style>
7 * {
8 padding: 0;
9 margin: 0;
10 text-align: center;
11 }
12 #board {
13 border: 1px solid #e0e0e0;
14 }
15 .container {
16 width: 100%;
17 height: 10vh;
18 display: flex;
19 align-items: center;
20 justify-content: center;
21 }
22 .color {
23 width: 40px;
24 height: 40px;
25 border: 0;
26 border-radius: 50%;
27 margin-right: 12px;
28 }
29 .red { background-color: #f44336; }
30 .green { background-color: #4caf50; }
31 .blue { background-color: #2196f3; }
32 .yellow { background-color: #ffeb3b; }
33 .dark { background-color: #212121; }
34 .white {
35 background-color: #ffffff;
36 border: 1px solid #212121;
37 }
38 .title {
39 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
40 margin-right: 20px;
41 font-weight: 700;
42 }
43 </style>
44 </head>
45 <body>
46 <div class="container">
47
48 <span class="title">Colors</span>
49 <button class="color red" onclick="setColor('#f44336')"></button>
50 <button class="color green" onclick="setColor('#4caf50')"></button>
51 <button class="color blue" onclick="setColor('#2196f3')"></button>
52 <button class="color yellow" onclick="setColor('#ffeb3b')"></button>
53 <button class="color dark" onclick="setColor('#212121')"></button>
54 <button class="color white" onclick="setColor('#ffffff')"></button>
55
56 <span class="title">Sizes</span>
57 <select onchange="setWidth(this)">
58 <option value="5">1</option>
59 <option value="10">2</option>
60 <option value="15">3</option>
61 <option value="20">4</option>
62 <option value="25">5</option>
63 <option value="30">6</option>
64 <option value="35">7</option>
65 <option value="40">8</option>
66 <option value="45">9</option>
67 <option value="50">10</option>
68 </select>
69 </div>
70
71 <canvas id="board" width="500" height="500"></canvas>
72
73 <script>
74
75 let canvas = document.getElementById("board")
76 let board = canvas.getContext("2d")
77
78 let active = false, x, y
79
80 board.lineCap = "round"
81 board.lineJoin = "round"
82 board.lineWidth = 5
83 board.strokeStyle = "#000"
84
85 function setColor( color ) {
86 board.strokeStyle = color
87 }
88
89 function setWidth( e ) {
90 board.lineWidth = e.value
91 }
92
93 document.onmousedown = function(e) {
94 active = true
95 x = e.clientX - canvas.offsetLeft
96 y = e.clientY - canvas.offsetTop
97 board.beginPath()
98 board.moveTo(x, y)
99 }
100
101 document.onmousemove = function(e) {
102 if( active ) {
103 x = e.clientX - canvas.offsetLeft
104 y = e.clientY - canvas.offsetTop
105 board.lineTo(x, y)
106 board.stroke()
107 }
108 }
109
110 document.onmouseup = function() {
111 active = false
112 board.closePath()
113 }
114 </script>
115 </body>
116 </html>
