mirror of
https://github.com/adanrsantos/ThePlaceHolders.git
synced 2024-12-16 08:00:39 -06:00
Compare commits
2 commits
bc1fffe07d
...
feb9c1cc6d
Author | SHA1 | Date | |
---|---|---|---|
feb9c1cc6d | |||
643e535a1f |
|
@ -12,6 +12,7 @@ html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
|
@ -86,21 +87,26 @@ html, body {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbarItems {
|
|
||||||
display: flex;
|
.toolbarItems label, input {
|
||||||
flex-direction: column;
|
float: left;
|
||||||
justify-content: start;
|
padding: 8px;
|
||||||
font-weight: 900;
|
font-size: 14px;
|
||||||
color: white;
|
color: white;
|
||||||
text-align: center;
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.strokePicker {
|
.toolbarItems button {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
float: right;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.strokePicker{
|
||||||
|
margin: 2px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.strokePicker:hover {
|
.strokePicker:hover {
|
||||||
|
@ -149,4 +155,32 @@ canvas {
|
||||||
.toolbar {
|
.toolbar {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toolbarItems label, input {
|
||||||
|
float: left;
|
||||||
|
padding: 4px;
|
||||||
|
font-size: 7.5px;
|
||||||
|
color: white;
|
||||||
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbarItems button {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
float: right;
|
||||||
|
padding: 8px;
|
||||||
|
padding-left: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.strokePicker{
|
||||||
|
margin: 2px;
|
||||||
|
height: 16px;
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.strokePicker:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -24,61 +24,90 @@
|
||||||
<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
|
<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
|
||||||
<div id="toolbar" class="d-flex align-items-center toolbar">
|
<div id="toolbar" class="d-flex align-items-center toolbar">
|
||||||
<div class="toolbarItems">
|
<div class="toolbarItems">
|
||||||
<!--extra space for toolbar-->
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255, 255, 255);" type="button" onclick="changeColor()"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="toolbarItems">
|
<div class="toolbarItems">
|
||||||
<label for="stroke">Strokes</label>
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0, 0, 0);" type="button" onclick="changeColor()"></button>
|
||||||
<input id="stroke" name="stroke" type="color" class="strokePicker">
|
|
||||||
</div>
|
</div>
|
||||||
<div class="toolbarItems">
|
<div class="toolbarItems">
|
||||||
<!--extra space for toolbar-->
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,128);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,0,0);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,0);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,128,0);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,128,128);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,0,128);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,0,128);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,64);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,64,64);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,128,255);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(64,0,255);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,64,0);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(192,192,192);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255,0,0);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255,255,0);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,255,0);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,255,255);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,0,247);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255,0,255);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255,255,128);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,255,128);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,255,255);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,255);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255,0,128);" type="button" onclick="changeColor()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbarItems">
|
||||||
|
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255,128,64);" type="button" onclick="changeColor()"></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
|
|
|
@ -121,6 +121,13 @@ function moveOffset(x, y) {
|
||||||
offy = Math.min(Math.max(y, -10 - DATA_SIZE / 2), DATA_SIZE + 10);
|
offy = Math.min(Math.max(y, -10 - DATA_SIZE / 2), DATA_SIZE + 10);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function changeColor() {
|
||||||
|
var button = document.getElementById("colorPicker");
|
||||||
|
var style = getComputedStyle(button);
|
||||||
|
|
||||||
|
console.log(style['background-color']);
|
||||||
|
}
|
||||||
|
|
||||||
canvas.addEventListener("wheel", async (e) => {
|
canvas.addEventListener("wheel", async (e) => {
|
||||||
let mouse = mousePosition(e);
|
let mouse = mousePosition(e);
|
||||||
let oldScale = scale;
|
let oldScale = scale;
|
||||||
|
@ -163,7 +170,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, [0, 0, 255, 255]);
|
setPixel(image.data, cx, cy, pixelColor);
|
||||||
await redraw();
|
await redraw();
|
||||||
draw();
|
draw();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue