Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 24, 2017 10:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/d231e87058f25b8596389f005108fe35 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/d231e87058f25b8596389f005108fe35 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/bugugogadi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<canvas id="canvas" style="width:100vw; height:100vh;"></canvas>
<button id="undo" style="position: absolute; left: 10px; top: 10px;">Undo</button>
<script id="jsbin-javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.height = canvas.clientHeight;
canvas.width = canvas.clientWidth;
var mouseState = "up";
var currentUndo = [];
var undoBuffer = [];
canvas.addEventListener("mouseup", function () {
mouseState = "up";
undoBuffer.push(currentUndo);
currentUndo = [];
});
canvas.addEventListener("mousedown", function () {
mouseState = "down";
});
canvas.addEventListener("mousemove", function (event) {
if (mouseState === "down") {
ctx.fillRect(event.clientX - 10, event.clientY - 10, 20, 20);
currentUndo.push([event.clientX, event.clientY]);
}
});
document.getElementById('undo').addEventListener("click", function () {
var undos = undoBuffer.pop();
for (var i = 0; i<undos.length; i++) {
var x = undos[i][0];
var y = undos[i][1];
ctx.clearRect(x - 10, y - 10, 20, 20);
}
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.height = canvas.clientHeight;
canvas.width = canvas.clientWidth;
var mouseState = "up";
var currentUndo = [];
var undoBuffer = [];
canvas.addEventListener("mouseup", function () {
mouseState = "up";
undoBuffer.push(currentUndo);
currentUndo = [];
});
canvas.addEventListener("mousedown", function () {
mouseState = "down";
});
canvas.addEventListener("mousemove", function (event) {
if (mouseState === "down") {
ctx.fillRect(event.clientX - 10, event.clientY - 10, 20, 20);
currentUndo.push([event.clientX, event.clientY]);
}
});
document.getElementById('undo').addEventListener("click", function () {
var undos = undoBuffer.pop();
for (var i = 0; i<undos.length; i++) {
var x = undos[i][0];
var y = undos[i][1];
ctx.clearRect(x - 10, y - 10, 20, 20);
}
});</script></body>
</html>
Raw
jsbin.bugugogadi.js
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.height = canvas.clientHeight;
canvas.width = canvas.clientWidth;
var mouseState = "up";
var currentUndo = [];
var undoBuffer = [];
canvas.addEventListener("mouseup", function () {
mouseState = "up";
undoBuffer.push(currentUndo);
currentUndo = [];
});
canvas.addEventListener("mousedown", function () {
mouseState = "down";
});
canvas.addEventListener("mousemove", function (event) {
if (mouseState === "down") {
ctx.fillRect(event.clientX - 10, event.clientY - 10, 20, 20);
currentUndo.push([event.clientX, event.clientY]);
}
});
document.getElementById('undo').addEventListener("click", function () {
var undos = undoBuffer.pop();
for (var i = 0; i<undos.length; i++) {
var x = undos[i][0];
var y = undos[i][1];
ctx.clearRect(x - 10, y - 10, 20, 20);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment