awesomeuser/furpsocial
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

button style + add responsiveness to click

Browse source
This commit is contained in:
awesomeuser 2023-08-04 19:08:38 +00:00
parent b811c80009
commit 4100c21702
1 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
index.php
View file

@ -5,6 +5,14 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<style> <style>
button {
background: var(--accent);
color: white;
font-weight: 600;
border: none;
cursor: pointer;
}
#center { #center {
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
@ -125,8 +133,8 @@
<canvas id="canvas-input" width="128" height="64"></canvas> <canvas id="canvas-input" width="128" height="64"></canvas>
<div style="border: 1px solid grey;"> <div style="border: 1px solid grey;">
<button type="button" onclick="setPen();">Pen</button> <button type="button" onclick="setPen();" id="pen-button">Pen</button>
<button type="button" onclick="setEraser();">Eraser</button> <button type="button" onclick="setEraser();" id="eraser-button">Eraser</button>
<button type="button" onclick="clearCanvas();" style="float: right;">Clear</button> <button type="button" onclick="clearCanvas();" style="float: right;">Clear</button>
</div> </div>
@ -149,11 +157,13 @@
for (let i = 0; i < pen.data.length; i += 4) { for (let i = 0; i < pen.data.length; i += 4) {
pen.data[i+3] = 255; pen.data[i+3] = 255;
} }
const penButton = document.getElementById("pen-button");
const eraser = ctx.createImageData(2, 2); const eraser = ctx.createImageData(2, 2);
for (let i = 0; i < eraser.data.length; i += 4) { for (let i = 0; i < eraser.data.length; i += 4) {
eraser.data[i+3] = 0; eraser.data[i+3] = 0;
} }
const eraserButton = document.getElementById("eraser-button");
var currentTool = pen; var currentTool = pen;
@ -190,10 +200,16 @@
function setPen() { function setPen() {
currentTool = pen; currentTool = pen;
penButton.style.textDecoration = "underline";
eraserButton.style.textDecoration = "none";
} }
function setEraser() { function setEraser() {
currentTool = eraser; currentTool = eraser;
penButton.style.textDecoration = "none";
eraserButton.style.textDecoration = "underline";
} }
function clearCanvas() { function clearCanvas() {