logan/ThePlaceHolders
1
0
Fork 0
mirror of https://github.com/adanrsantos/ThePlaceHolders.git synced 2025-01-05 11:20:37 -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 { html, body {
height: 100%; height: 100%;
width: 100%;
margin: 0px;
} }
.wrapper { .wrapper {
@ -72,23 +74,24 @@ html, body {
.toolbar { .toolbar {
display: flex; display: flex;
justify-content: space-around; flex-direction: row;
align-items: center; justify-content: start;
align-items: start;
border-top: solid black 1px; border-top: solid black 1px;
background-color: var(--utsa-blue); background-color: gray;
width: 100%; width: 100%;
height:auto; height:100%;
} }
.toolbarItems { .toolbarItems {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: start;
font-weight: 900; font-weight: 900;
color: white; color: white;
text-align: center; text-align: center;
height: 100%; height: 20px;
width: 100px; width: 20px;
} }
.strokePicker { .strokePicker {
@ -113,4 +116,4 @@ canvas {
/* possible hamburger menu for moblie users*/ /* possible hamburger menu for moblie users*/
position: absolute position: absolute
} }
} }

58
static/canvas.html
View file

@ -20,23 +20,51 @@
<a class="rightB">Settings</a> <a class="rightB">Settings</a>
</div> </div>
<!--note to self: below IS the canvas--> <!--note to self: below IS the canvas-->
<!--<div class="canvasCont">--> <canvas id="canvas" width="1000" height="550" style="border:1px solid #000000;" alt="canvas"></canvas>
<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>-->
<!--note to self: above IS the canvas--> <!--note to self: above IS the canvas-->
</div> </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> <script src="./canvas.js"></script>
</body> </body>
</html> </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) { if (cx < 0 || cx > CANVAS_SIZE || cy < 0 || cy > CANVAS_SIZE) {
return; return;
} }
setPixel(image.data, cx, cy, [255, 0, 0, 255]); setPixel(image.data, cx, cy, [0, 0, 255, 255]);
await redraw(); await redraw();
draw(); draw();
} }