add canvas clearing
This commit is contained in:
parent
189a226782
commit
773dab7b75
1 changed files with 21 additions and 7 deletions
28
index.php
28
index.php
|
@ -125,9 +125,9 @@
|
||||||
<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">Pen</button>
|
<button type="button" onclick="setPen();">Pen</button>
|
||||||
<button type="button">Eraser</button>
|
<button type="button" onclick="setEraser();">Eraser</button>
|
||||||
<button type="button" style="float: right;">Clear</button>
|
<button type="button" onclick="clearCanvas();" style="float: right;">Clear</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form method="post" action="farp.php">
|
<form method="post" action="farp.php">
|
||||||
|
@ -137,7 +137,7 @@
|
||||||
<input type="submit" value="Farp it">
|
<input type="submit" value="Farp it">
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<span style="font-size: 12px; color: grey;">Privacy Policy: The only data collected by furpsocial server-side is the contents of your posts (signature and body text). This information is stored in our secure databases which are wiped of all post data every week. This data is only used to accomodate furpsocial as a social media platform. Client-side, furpsocial stores your most recently used signature as a cookie, which persists for one day before expiring.</span>
|
<span style="font-size: 12px; color: grey;">Privacy Policy: The only data collected by furpsocial server-side is the contents of your posts (drawing and signature). This information is stored in our secure databases which are wiped of all post data every week. This data is only used to accomodate furpsocial as an oekaki-sharing platform. Client-side, furpsocial stores your most recently used signature as a cookie, which persists for one day before expiring.</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -147,12 +147,14 @@
|
||||||
|
|
||||||
const pen = ctx.createImageData(2, 2);
|
const pen = ctx.createImageData(2, 2);
|
||||||
for (let i = 0; i < pen.data.length; i += 4) {
|
for (let i = 0; i < pen.data.length; i += 4) {
|
||||||
// pen.data[i] = 0;
|
|
||||||
// pen.data[i+1] = 0;
|
|
||||||
// pen.data[i+2] = 0;
|
|
||||||
pen.data[i+3] = 255;
|
pen.data[i+3] = 255;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const eraser = ctx.createImageData(2, 2);
|
||||||
|
for (let i = 0; i < eraser.data.length; i += 4) {
|
||||||
|
eraser.data[i+3] = 0;
|
||||||
|
}
|
||||||
|
|
||||||
var drawing = false;
|
var drawing = false;
|
||||||
canvas.onmousedown = function() { drawing = true; }
|
canvas.onmousedown = function() { drawing = true; }
|
||||||
document.onmouseup = function() {
|
document.onmouseup = function() {
|
||||||
|
@ -183,6 +185,18 @@
|
||||||
|
|
||||||
ctx.putImageData(pen, posX, posY);
|
ctx.putImageData(pen, posX, posY);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setPen() {
|
||||||
|
alert("pen");
|
||||||
|
}
|
||||||
|
|
||||||
|
function setEraser() {
|
||||||
|
alert("eras");
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearCanvas() {
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- save most recent signature as a cookie and autoload on page load -->
|
<!-- save most recent signature as a cookie and autoload on page load -->
|
||||||
|
|
Reference in a new issue