|
3 | 3 | <head> |
4 | 4 | <meta charset="UTF-8"> |
5 | 5 | <title>HTML5 Canvas</title> |
6 | | - <link rel="icon" href="https://fav.farm/✅" /> |
| 6 | + <link rel="icon" href="https://fav.farm/🔥" /> |
7 | 7 | </head> |
8 | 8 | <body> |
| 9 | + <h1>Draw on the canvas!</h1> |
| 10 | + <button id="clear">Clear Canvas</button> |
9 | 11 | <canvas id="draw" width="800" height="800"></canvas> |
10 | 12 | <script> |
11 | 13 | const canvas = document.querySelector('#draw'); |
|
16 | 18 | ctx.lineJoin = 'round'; |
17 | 19 | ctx.lineCap = 'round'; |
18 | 20 | ctx.lineWidth = 100; |
19 | | -// ctx.globalCompositeOperation = 'multiply'; |
| 21 | +ctx.globalCompositeOperation = 'screen'; |
20 | 22 |
|
21 | | -let isDrawing = false; |
| 23 | +let isDrawing = false; |
22 | 24 | let lastX = 0; |
23 | 25 | let lastY = 0; |
24 | | -let hue = 0; |
25 | | -let direction = true; |
| 26 | +let hue = 0; |
| 27 | +let direction = true; |
| 28 | + |
26 | 29 |
|
27 | 30 | function draw(e) { |
28 | | - if (!isDrawing) return; // stop the fn from running when they are not moused down |
| 31 | + if(!isDrawing) return; // stop the fn from running when they are not mouse down |
29 | 32 | console.log(e); |
30 | 33 | ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; |
31 | 34 | ctx.beginPath(); |
|
40 | 43 | if (hue >= 360) { |
41 | 44 | hue = 0; |
42 | 45 | } |
43 | | - if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) { |
| 46 | + if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1){ |
44 | 47 | direction = !direction; |
45 | 48 | } |
46 | | - |
47 | | - if(direction) { |
48 | | - ctx.lineWidth++; |
| 49 | + if(direction){ |
| 50 | + ctx.lineWidth++; |
49 | 51 | } else { |
50 | 52 | ctx.lineWidth--; |
51 | 53 | } |
52 | | - |
53 | 54 | } |
54 | 55 |
|
55 | 56 | canvas.addEventListener('mousedown', (e) => { |
|
62 | 63 | canvas.addEventListener('mouseup', () => isDrawing = false); |
63 | 64 | canvas.addEventListener('mouseout', () => isDrawing = false); |
64 | 65 |
|
65 | | -</script> |
| 66 | +document.querySelector('#clear').addEventListener('click', () => { |
| 67 | + ctx.clearRect(0, 0, canvas.width, canvas.height); |
| 68 | +}); |
| 69 | + |
66 | 70 |
|
| 71 | +</script> |
67 | 72 | <style> |
68 | 73 | html, body { |
69 | 74 | margin: 0; |
| 75 | + background-color: black; |
70 | 76 | } |
| 77 | + |
| 78 | + h1 { |
| 79 | + position: absolute; |
| 80 | + text-align: center; |
| 81 | + top: 20px; |
| 82 | + left: 50%; |
| 83 | + transform: translateX(-50%); |
| 84 | + color: white; |
| 85 | + font-family: sans-serif; |
| 86 | + z-index: 10; |
| 87 | + pointer-events: none; |
| 88 | + background-color: black; |
| 89 | + width: 400px; |
| 90 | +} |
| 91 | + |
| 92 | +#clear { |
| 93 | + position: absolute; |
| 94 | + top: 20px; |
| 95 | + right: 20px; |
| 96 | + padding: 10px 20px; |
| 97 | + background: white; |
| 98 | + border: none; |
| 99 | + border-radius: 5px; |
| 100 | + cursor: pointer; |
| 101 | + font-size: 1rem; |
| 102 | + z-index: 10; |
| 103 | +} |
| 104 | + |
| 105 | +#clear:hover { |
| 106 | + background: black; |
| 107 | + color: white; |
| 108 | + transition: all 0.2s ease; |
| 109 | +} |
71 | 110 | </style> |
72 | 111 |
|
73 | 112 | </body> |
|
0 commit comments