|
Home - Old Man Programmer
| Displaying webapps/whiteboard/index.html
<!DOCTYPE html>
<html
onmousedown='draw_start(event);'
onmousemove='draw_move(event);'
onmouseup='draw_stop(event);'
onkeydown='key(event);'
oncontextmenu='return false;'
>
<head>
<meta charset='utf-8'>
<title> Whiteboard </title>
<style>
body { cursor: crosshair; margin: 0px; padding: 0px; overflow: hidden; font-family: "Arial"; }
canvas { z-index: -1; position: absolute; top:0px; left: 0px; margin: 0px; }
.cbox {
z-index: 10; margin: 5px; border: 1px solid lightgray;
width: 30px; height: 30px; border-radius: 5px;
}
.crnd {
z-index: 10; margin: 0px; border: 1px solid lightgray;
width: 30px; height: 30px; border-radius: 5px;
}
.sbox { height:60px; }
</style>
<script>
var _ccanvas, _cctx, _dcanvas, _dctx;
var _drawing, _sx, _sy, _lx, _ly, _color = "black", _lwidth = 3;
var _pathQ = [], _curpath = null, _redoQ = [];
var _erasing, _eraser = null, _hideeraser;
function reset(e) {
e.preventDefault();
e.stopPropagation();
_pathQ = [];
_redoQ = [];
_cctx.clearRect(0,0,window.innerWidth, window.innerHeight);
_dctx.clearRect(0,0,window.innerWidth, window.innerHeight);
}
function start() {
_drawing = _erasing = false;
_dcanvas = document.getElementById("dlayer");
_dctx = _dcanvas.getContext("2d");
_ccanvas = document.getElementById("clayer");
_cctx = _ccanvas.getContext("2d");
_cctx.lineWidth = _dctx.lineWidth = 3;
_cctx.lineJoin = "round";
_lwidth = 3;
_eraser = document.getElementById("eraser");
_eraser.style.visibility = "hidden";
_hideeraser = false;
_lx = _ly = 0;
_color = _cctx.strokeStyle = "black";
resize();
}
function resize() {
_dcanvas.width = _ccanvas.width = window.innerWidth;
_dcanvas.height = _ccanvas.height = window.innerHeight;
_cctx.lineWidth = _dctx.lineWidth = 3;
drawpaths();
}
function draw_start(e) {
e.preventDefault();
e.stopPropagation();
_drawing = true;
_sx = _lx = e.clientX;
_sy = _ly = e.clientY;
_cctx.lineWidth = _lwidth;
_cctx.strokeStyle = _color;
_cctx.beginPath();
_cctx.moveTo(_lx, _ly);
_curpath = new Path2D();
_curpath.moveTo(_lx, _ly);
_redoQ = [];
}
function draw_move(e) {
if (_erasing && !_hideeraser) {
if (e.clientX < 30) return;
eraser.style.top = (e.clientY - 15) + "px";
eraser.style.left = (e.clientX - 15) + "px";
}
if (_drawing == false) return;
// _cctx.moveTo(_lx, _ly);
_cctx.lineTo(_lx = e.clientX, _ly = e.clientY);
// _cctx.closePath();
_cctx.stroke();
_curpath.lineTo(_lx, _ly);
// _curpath.stroke();
}
function draw_stop(e) {
if (_drawing == false) return;
_drawing = false;
_curpath.moveTo(_sx, _sy);
_curpath.closePath();
var path={path:_curpath, color: _color, lwidth: _lwidth};
_cctx.clearRect(0,0,window.innerWidth, window.innerHeight);
drawpath(path);
_pathQ.push(path);
_curpath = null;
}
function undo() {
if (_pathQ.length == 0) return;
var path=_pathQ.pop();
_redoQ.push(path);
drawpaths();
}
function redo() {
if (_redoQ.length == 0) return;
var path = _redoQ.pop();
_pathQ.push(path);
drawpaths();
}
function drawpaths() {
_dctx.clearRect(0,0,window.innerWidth, window.innerHeight);
for (var path of _pathQ)
drawpath(path);
}
function drawpath(path) {
_dctx.lineWidth = path.lwidth;
_dctx.strokeStyle = path.color;
_dctx.stroke(path.path);
}
function setcolor(color, lw, e) {
_color = color;
_erasing = false;
_lwidth = lw;
e.stopPropagation();
}
function starterasing(e) {
_color = "white";
_lwidth = 30;
_erasing = true;
eraser.style.visibility = "visible";
e.stopPropagation();
}
function key(e) {
if (e.keyCode == 27) {
_color = "black";
_lwidth = 3;
_drawing = _erasing = false;
eraser.style.visibility = "hidden";
eraser.style.top = "-30px";
}
if (e.keyCode == 90 && e.ctrlKey) {
if (e.shiftKey) redo();
else undo();
}
}
function senter() {
if (_erasing) {
_hideeraser = true;
eraser.style.visibility = "hidden";
eraser.style.top = "-30px";
}
}
function sleave() {
if (_erasing) {
_hideeraser = false;
eraser.style.visibility = "visible";
}
}
</script>
</head>
<body onload='start();' onresize='resize();'>
<canvas id='dlayer'></canvas>
<canvas id='clayer'></canvas>
<div onmouseenter='senter();' onmouseleave='sleave();' style='width:30px; height:0px;'>
<div class=sbox> </div>
<div class=cbox style='background: black;' onmousedown='setcolor("black",3,event);'> </div>
<div class=cbox style='background: red;' onmousedown='setcolor("red",3,event);'> </div>
<div class=cbox style='background: green;' onmousedown='setcolor("green",3,event);'> </div>
<div class=cbox style='background: blue;' onmousedown='setcolor("blue",3,event);'> </div>
<div class=cbox style='background: yellow;' onmousedown='setcolor("yellow",3,event);'> </div>
<div class=cbox style='background: purple;' onmousedown='setcolor("purple",3,event);'> </div>
<div class=cbox style='background: white;' onmousedown='starterasing(event);'> </div>
<div class=sbox> </div>
<div class=cbox style='background: white;' onmousedown='reset(event);'>Clr</div>
</div>
<div class=crnd id='eraser' style='position: absolute;'> </div>
</body>
</html>
|