qubbit/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var signature = [[1,85,37],[0,85,35],[0,85,32],[0,85,28],[0,85,16],[0,85,9],[0,85,4],[0,85,1],[0,85,0],[0,85,2],[0,85,6],[0,85,10],[0,85,18],[0,84,21],[0,84,22],[0,84,23],[0,84,24],[0,84,27],[0,84,30],[0,83,31],[0,83,33],[0,83,34],[0,83,35],[0,82,37],[0,82,35],[0,82,33],[0,82,32],[0,82,31],[0,82,30],[0,82,29],[0,82,28],[0,82,26],[0,82,25],[0,82,24],[0,82,23],[0,82,22],[0,82,21],[0,83,21],[0,87,18],[0,90,16],[0,92,14],[0,97,11],[0,98,10],[0,100,10],[0,100,9],[0,100,8],[0,100,9],[0,100,10],[0,100,11],[0,100,16],[0,100,20],[0,100,28],[0,100,32],[0,100,36],[0,100,38],[0,100,39],[0,100,40],[0,100,41],[0,100,42],[0,100,41],[0,100,40],[0,100,38],[0,100,36],[0,100,35],[0,100,31],[0,100,25],[0,100,23],[0,100,22],[0,100,21],[0,100,20],[0,100,21],[0,100,22],[0,100,24],[0,100,25],[0,100,28],[0,100,32],[0,100,33],[0,100,34],[0,100,36],[0,100,38],[0,100,39],[0,100,40],[0,100,42],[0,101,42],[0,101,43],[0,102,43],[0,104,43],[0,105,43],[0,106,41],[0,108,41],[0,110,41],[0,110,40],[0,112,40],[0,114,40],[0,115,39],[1,120,41],[0,119,41],[0,118,39],[0,117,38],[0,117,36],[0,116,34],[0,116,32],[0,116,31],[0,116,30],[0,116,31],[0,116,32],[0,116,33],[0,116,34],[0,116,35],[0,116,37],[0,116,38],[0,116,40],[0,116,41],[0,116,40],[0,116,38],[0,116,35],[0,116,33],[0,116,24],[0,116,21],[0,116,19],[0,116,20],[0,116,21],[0,116,23],[0,116,25],[0,116,26],[0,116,31],[0,116,33],[0,116,35],[0,116,42],[0,116,45],[0,116,46],[0,116,45],[0,116,42],[0,116,39],[0,115,31],[0,115,26],[0,115,17],[0,115,10],[0,115,7],[0,116,0],[0,122,60],[0,123,66],[0,123,56],[0,123,42],[0,124,38],[0,124,30],[0,124,28],[0,124,22],[0,124,20],[0,125,14],[0,125,13],[0,126,10],[0,126,9],[0,127,9],[0,127,11],[0,127,13],[0,127,14],[0,128,16],[0,129,20],[0,130,23],[0,131,30],[0,132,34],[0,133,37],[0,133,42],[0,134,44],[0,134,45],[0,135,49],[0,136,49],[0,136,50],[0,138,52],[0,140,52],[0,152,49],[0,158,44],[0,178,4],[0,96,44],[0,90,2],[0,84,15],[0,81,21],[0,70,39],[0,49,50],[0,26,57],[0,18,60]];

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = '#008';
ctx.lineWidth = 1;

ctx.beginPath();
for(var point of signature){
  if(point[0] == 1){
    ctx.moveTo(point[1], point[2]);
  } else {
    ctx.lineTo(point[1], point[2]);
    ctx.stroke(); // of a genius ;)
  }
}
ctx.closePath();

// sig verification: good signatures have a green outline, bad will have red
var outline_color = "red";

// criteria to use to verify a signature, supported keys:
// min_width, min_points, min_height
// can add more in verify function
var criteria = {min_width: 10, min_points: 50};

if(verify(signature, criteria)){
  outline_color = "green";
}

bb = bounding_box(signature);

ctx.beginPath();
ctx.strokeStyle = outline_color;
ctx.rect(bb.x_min, bb.y_min, bb.x_max, bb.y_max);
ctx.stroke();


function bounding_box(points){
  var xs = points.map(function(p){ return p[1]; });
  var ys = points.map(function(p){ return p[2]; });
  var x_min = Math.min(...xs);
  var x_max = Math.max(...xs);
  var y_min = Math.min(...ys);
  var y_max = Math.max(...ys);
  return {x_min: x_min, x_max: x_max, y_min: y_min, y_max: y_max};
}

// unused- might come in handy
function dist(p1, p2){
  var dx = p1.x - p2.x;
  var dy = p1.y - p2.y;
  return Math.sqrt(dx * dx + dy * dy);
}

// verify a signature using the passed parameters as criteria
function verify(signature, params){
  var min_width = params.min_width || -1;
  var min_height = params.min_height || -1;
  var min_points = params.min_points || -1;
  var box = bounding_box(signature);

  var ret_val = false;

  if (min_width > -1 && min_width >= (box.x_max - box.x_min)){
    ret_val = true;
  }

  if (min_height > -1 && min_height >= (box.y_max - box.y_min)){
    ret_val = true;
  }

  if(min_points > -1 && signature.length >= min_points){
    ret_val = true;
  }

  return ret_val;
}
</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>
	<canvas id="canvas" width="500" height="500"></canvas>
	</body>
	<script type="text/javascript">
	var signature = [[1,85,37],[0,85,35],[0,85,32],[0,85,28],[0,85,16],[0,85,9],[0,85,4],[0,85,1],[0,85,0],[0,85,2],[0,85,6],[0,85,10],[0,85,18],[0,84,21],[0,84,22],[0,84,23],[0,84,24],[0,84,27],[0,84,30],[0,83,31],[0,83,33],[0,83,34],[0,83,35],[0,82,37],[0,82,35],[0,82,33],[0,82,32],[0,82,31],[0,82,30],[0,82,29],[0,82,28],[0,82,26],[0,82,25],[0,82,24],[0,82,23],[0,82,22],[0,82,21],[0,83,21],[0,87,18],[0,90,16],[0,92,14],[0,97,11],[0,98,10],[0,100,10],[0,100,9],[0,100,8],[0,100,9],[0,100,10],[0,100,11],[0,100,16],[0,100,20],[0,100,28],[0,100,32],[0,100,36],[0,100,38],[0,100,39],[0,100,40],[0,100,41],[0,100,42],[0,100,41],[0,100,40],[0,100,38],[0,100,36],[0,100,35],[0,100,31],[0,100,25],[0,100,23],[0,100,22],[0,100,21],[0,100,20],[0,100,21],[0,100,22],[0,100,24],[0,100,25],[0,100,28],[0,100,32],[0,100,33],[0,100,34],[0,100,36],[0,100,38],[0,100,39],[0,100,40],[0,100,42],[0,101,42],[0,101,43],[0,102,43],[0,104,43],[0,105,43],[0,106,41],[0,108,41],[0,110,41],[0,110,40],[0,112,40],[0,114,40],[0,115,39],[1,120,41],[0,119,41],[0,118,39],[0,117,38],[0,117,36],[0,116,34],[0,116,32],[0,116,31],[0,116,30],[0,116,31],[0,116,32],[0,116,33],[0,116,34],[0,116,35],[0,116,37],[0,116,38],[0,116,40],[0,116,41],[0,116,40],[0,116,38],[0,116,35],[0,116,33],[0,116,24],[0,116,21],[0,116,19],[0,116,20],[0,116,21],[0,116,23],[0,116,25],[0,116,26],[0,116,31],[0,116,33],[0,116,35],[0,116,42],[0,116,45],[0,116,46],[0,116,45],[0,116,42],[0,116,39],[0,115,31],[0,115,26],[0,115,17],[0,115,10],[0,115,7],[0,116,0],[0,122,60],[0,123,66],[0,123,56],[0,123,42],[0,124,38],[0,124,30],[0,124,28],[0,124,22],[0,124,20],[0,125,14],[0,125,13],[0,126,10],[0,126,9],[0,127,9],[0,127,11],[0,127,13],[0,127,14],[0,128,16],[0,129,20],[0,130,23],[0,131,30],[0,132,34],[0,133,37],[0,133,42],[0,134,44],[0,134,45],[0,135,49],[0,136,49],[0,136,50],[0,138,52],[0,140,52],[0,152,49],[0,158,44],[0,178,4],[0,96,44],[0,90,2],[0,84,15],[0,81,21],[0,70,39],[0,49,50],[0,26,57],[0,18,60]];

	var canvas = document.querySelector("#canvas");
	var ctx = canvas.getContext("2d");
	ctx.strokeStyle = '#008';
	ctx.lineWidth = 1;

	ctx.beginPath();
	for(var point of signature){
	if(point[0] == 1){
	ctx.moveTo(point[1], point[2]);
	} else {
	ctx.lineTo(point[1], point[2]);
	ctx.stroke(); // of a genius ;)
	}
	}
	ctx.closePath();

	// sig verification: good signatures have a green outline, bad will have red
	var outline_color = "red";

	// criteria to use to verify a signature, supported keys:
	// min_width, min_points, min_height
	// can add more in verify function
	var criteria = {min_width: 10, min_points: 50};

	if(verify(signature, criteria)){
	outline_color = "green";
	}

	bb = bounding_box(signature);

	ctx.beginPath();
	ctx.strokeStyle = outline_color;
	ctx.rect(bb.x_min, bb.y_min, bb.x_max, bb.y_max);
	ctx.stroke();


	function bounding_box(points){
	var xs = points.map(function(p){ return p[1]; });
	var ys = points.map(function(p){ return p[2]; });
	var x_min = Math.min(...xs);
	var x_max = Math.max(...xs);
	var y_min = Math.min(...ys);
	var y_max = Math.max(...ys);
	return {x_min: x_min, x_max: x_max, y_min: y_min, y_max: y_max};
	}

	// unused- might come in handy
	function dist(p1, p2){
	var dx = p1.x - p2.x;
	var dy = p1.y - p2.y;
	return Math.sqrt(dx * dx + dy * dy);
	}

	// verify a signature using the passed parameters as criteria
	function verify(signature, params){
	var min_width = params.min_width \|\| -1;
	var min_height = params.min_height \|\| -1;
	var min_points = params.min_points \|\| -1;
	var box = bounding_box(signature);

	var ret_val = false;

	if (min_width > -1 && min_width >= (box.x_max - box.x_min)){
	ret_val = true;
	}

	if (min_height > -1 && min_height >= (box.y_max - box.y_min)){
	ret_val = true;
	}

	if(min_points > -1 && signature.length >= min_points){
	ret_val = true;
	}

	return ret_val;
	}
	</script>
	</html>