mikroskeem/draw.html

## draw.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JS test</title>
    <style type="text/css">
* { margin:0; padding:0; }
html, body { width:100%; height:100%; }
canvas { background: #eee; }
    </style>
  </head>
  <body onLoad="init();">
    <canvas></canvas>
    <hr>
    <button onClick='lineCoords=[]; localStorage["drawing"]=""; draw()'>Clear</button>
    <script type="text/javascript">
      var coords = {x:0,y:0},
          lineCoords = [],
          locked = 0,
          drawing = false,
          brushSize = 1;
          canv = document.querySelector("canvas");
      var init = function(){
        if(localStorage["drawing"]){var a = localStorage["drawing"]; lineCoords=JSON.parse(a)}
        canv.requestPointerLock = canv.requestPointerLock || canv.mozRequestPointerLock || canv.webkitRequestPointerLock;
        canv.onclick=function(){
          if(!locked) {
            canv.requestPointerLock()
          }
        }
        canv.onmousedown = function(){
          drawing = true;
        }
        canv.onmouseup = function(){
          drawing=false;
        }
	var locks = ['pointerlockchange', 'mozpointerlockchange', 'webkitpointerlockchange']; // This is so ridiculous
	for(var i=0;locks.length>i;i++){
          document.addEventListener(locks[i], pointerLockChange, false);
        }
        window.addEventListener('resize', resizeCanvas, false);
        resizeCanvas();
      }
      var pointerLockChange = function(){
        if(document.pointerLockElement === canv || document.mozPointerLockElement === canv || document.webkitPointerLockElement === canv) {
          locked = 1;
          document.addEventListener("mousemove", mouseListener, false)
        } else {
          locked = 0;
          document.removeEventListener("mousemove", mouseListener, false)
        }
      }
      var draw = function(){
        var ctx = canv.getContext("2d");
        var ctxLine = canv.getContext("2d");
        ctx.clearRect(0, 0, canv.width, canv.height);
        ctxLine.fillStyle="blue";
        for(var i=0; lineCoords.length>i; i++){
          for(var t=0;brushSize>t; t++){
            for(var u=0;brushSize>u; u++){
              ctxLine.fillRect(lineCoords[i].x+t,lineCoords[i].y+u,1,1);
            }
          }
        }
        ctx.fillStyle="red";
        ctx.fillRect(coords.x, coords.y, 5, 5);
        ctx.fillRect(coords.x+5, coords.y, 5, 5);
        ctx.fillRect(coords.x, coords.y+5, 5, 5);
        ctx.fillRect(coords.x+10, coords.y, 5, 5);
        ctx.fillRect(coords.x, coords.y+10, 5, 5);
        ctx.fillRect(coords.x+5, coords.y+5, 5, 5);
        ctx.fillRect(coords.x+10, coords.y+10, 5, 5);
      }
      var mouseListener = function(e){
        var X = e.movementX || e.mozMovementX || e.webkitMovementX || 0,
        Y = e.movementY || e.mozMovementY || e.webkitMovementY || 0;
        coords.y = coords.y + Y;
        coords.x = coords.x + X;
        if(0>coords.y) {
          coords.y=0;
        }
        if(coords.y>window.innerHeight-100){
          coords.y=window.innerHeight-105;
        }
        if(0>coords.x) {
          coords.x=0;
        }
        if(coords.x>window.innerWidth-100) {
          coords.x=window.innerWidth-105;
        }
        if(drawing){
		lineCoords[lineCoords.length] = {x: coords.x, y: coords.y};
	}
        draw()
      }
      var resizeCanvas = function(){
        canv.width = window.innerWidth-100;
        canv.height = window.innerHeight-100;
        draw();
      }
      window.onbeforeunload = function(){
        localStorage["drawing"] = JSON.stringify(lineCoords);
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>JS test</title>
	<style type="text/css">
	* { margin:0; padding:0; }
	html, body { width:100%; height:100%; }
	canvas { background: #eee; }
	</style>
	</head>
	<body onLoad="init();">
	<canvas></canvas>
	<hr>
	<button onClick='lineCoords=[]; localStorage["drawing"]=""; draw()'>Clear</button>
	<script type="text/javascript">
	var coords = {x:0,y:0},
	lineCoords = [],
	locked = 0,
	drawing = false,
	brushSize = 1;
	canv = document.querySelector("canvas");
	var init = function(){
	if(localStorage["drawing"]){var a = localStorage["drawing"]; lineCoords=JSON.parse(a)}
	canv.requestPointerLock = canv.requestPointerLock \|\| canv.mozRequestPointerLock \|\| canv.webkitRequestPointerLock;
	canv.onclick=function(){
	if(!locked) {
	canv.requestPointerLock()
	}
	}
	canv.onmousedown = function(){
	drawing = true;
	}
	canv.onmouseup = function(){
	drawing=false;
	}
	var locks = ['pointerlockchange', 'mozpointerlockchange', 'webkitpointerlockchange']; // This is so ridiculous
	for(var i=0;locks.length>i;i++){
	document.addEventListener(locks[i], pointerLockChange, false);
	}
	window.addEventListener('resize', resizeCanvas, false);
	resizeCanvas();
	}
	var pointerLockChange = function(){
	if(document.pointerLockElement === canv \|\| document.mozPointerLockElement === canv \|\| document.webkitPointerLockElement === canv) {
	locked = 1;
	document.addEventListener("mousemove", mouseListener, false)
	} else {
	locked = 0;
	document.removeEventListener("mousemove", mouseListener, false)
	}
	}
	var draw = function(){
	var ctx = canv.getContext("2d");
	var ctxLine = canv.getContext("2d");
	ctx.clearRect(0, 0, canv.width, canv.height);
	ctxLine.fillStyle="blue";
	for(var i=0; lineCoords.length>i; i++){
	for(var t=0;brushSize>t; t++){
	for(var u=0;brushSize>u; u++){
	ctxLine.fillRect(lineCoords[i].x+t,lineCoords[i].y+u,1,1);
	}
	}
	}
	ctx.fillStyle="red";
	ctx.fillRect(coords.x, coords.y, 5, 5);
	ctx.fillRect(coords.x+5, coords.y, 5, 5);
	ctx.fillRect(coords.x, coords.y+5, 5, 5);
	ctx.fillRect(coords.x+10, coords.y, 5, 5);
	ctx.fillRect(coords.x, coords.y+10, 5, 5);
	ctx.fillRect(coords.x+5, coords.y+5, 5, 5);
	ctx.fillRect(coords.x+10, coords.y+10, 5, 5);
	}
	var mouseListener = function(e){
	var X = e.movementX \|\| e.mozMovementX \|\| e.webkitMovementX \|\| 0,
	Y = e.movementY \|\| e.mozMovementY \|\| e.webkitMovementY \|\| 0;
	coords.y = coords.y + Y;
	coords.x = coords.x + X;
	if(0>coords.y) {
	coords.y=0;
	}
	if(coords.y>window.innerHeight-100){
	coords.y=window.innerHeight-105;
	}
	if(0>coords.x) {
	coords.x=0;
	}
	if(coords.x>window.innerWidth-100) {
	coords.x=window.innerWidth-105;
	}
	if(drawing){
	lineCoords[lineCoords.length] = {x: coords.x, y: coords.y};
	}
	draw()
	}
	var resizeCanvas = function(){
	canv.width = window.innerWidth-100;
	canv.height = window.innerHeight-100;
	draw();
	}
	window.onbeforeunload = function(){
	localStorage["drawing"] = JSON.stringify(lineCoords);
	}
	</script>
	</body>
	</html>