logan/ThePlaceHolders
1
0
Fork 0
mirror of https://github.com/adanrsantos/ThePlaceHolders.git synced 2024-12-16 03:40:38 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

started on color palette

Browse source
This commit is contained in:
reddishquill371 2024-11-13 17:12:52 -06:00
parent 34544c8bdf
commit ac618b4ae4
3 changed files with 55 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
static/canvas.css
View file

@ -10,6 +10,8 @@
html, body {
height: 100%;
width: 100%;
margin: 0px;
}
.wrapper {
@ -72,23 +74,24 @@ html, body {
.toolbar {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
justify-content: start;
align-items: start;
border-top: solid black 1px;
background-color: var(--utsa-blue);
background-color: gray;
width: 100%;
height:auto;
height:100%;
}
.toolbarItems {
display: flex;
flex-direction: column;
justify-content: center;
justify-content: start;
font-weight: 900;
color: white;
text-align: center;
height: 100%;
width: 100px;
height: 20px;
width: 20px;
}
.strokePicker {
@ -113,4 +116,4 @@ canvas {
/* possible hamburger menu for moblie users*/
position: absolute
}
}
}

58
static/canvas.html
View file

@ -20,23 +20,51 @@
<a class="rightB">Settings</a>
</div>
<!--note to self: below IS the canvas-->
<!--<div class="canvasCont">-->
<canvas id="canvas" width="1000" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
<div id="toolbar" class="d-flex align-items-center toolbar">
<div class="toolbarItems">
<button id="zoomOut">-</button>
</div>
<div class="toolbarItems">
<label for="stroke">Strokes</label>
<input id="stroke" name="stroke" type="color" class="strokePicker">
</div>
<div class="toolbarItems">
<button onclick="zoomIn"id="zoomIn">+</button>
</div>
</div>
<!--</div>-->
<canvas id="canvas" width="1000" height="550" style="border:1px solid #000000;" alt="canvas"></canvas>
<!--note to self: above IS the canvas-->
</div>
<div id="toolbar" class="d-flex toolbar flex-wrap">
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255, 255, 255);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0, 0, 0);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,128);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,0,0);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,0);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,128,0);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,128,128);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,0,128);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,0,128);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,64);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,64);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,64);" type="button"></button>
</div>
<!--<div class="toolbarItems">
<label for="stroke">Strokes</label>
<input id="stroke" name="stroke" type="color" class="strokePicker">
</div>-->
</div>
<script src="./canvas.js"></script>
</body>
</html>

2
static/canvas.js
View file

@ -100,7 +100,7 @@ canvas.addEventListener("mouseup", async (e) => {
if (cx < 0 || cx > CANVAS_SIZE || cy < 0 || cy > CANVAS_SIZE) {
return;
}
setPixel(image.data, cx, cy, [255, 0, 0, 255]);
setPixel(image.data, cx, cy, [0, 0, 255, 255]);
await redraw();
draw();
}