Signature Renderer

by austinfrance

HTML

<canvas id="canvas" width="225" height="120"></canvas>
<br>
<textarea cols="40" rows="10" id="sig">001263048023048025046028045030043033042035041038041041041044041047041051041053045054056054072052077049077051077056077062077068077071077075077077076079074080072080071080069080061084054088045091034095023097015097012097008096007092007089008084012080016077025077034077041080049084056088061092067095071099074101077102079102081102083101084097085091087088088086089083092082094082095082096083096083101079107072116060123050130038133034134030134029133029130029127029125030122033120034118036117039117043117047123049137051149051163051173051179051183053186056187062187067187074187078186082184086184088184088184089186089190089197089200089204089204090197091190095181097172098162099154099146099138099134099133097132097131097131096131095134094141091149087160080167075175068178060180055180047181043182040183038184035184033184032182031178031173031167032162032156033149034141036132038126041120043114044110044108043107040107037107034106033104032102032100032098032094033092034091034089035088035087035087032087024087021088018088016089016088016087023087034087046087054089064091067093071094073097076101078106080112081118082124083132086137087142090145095146101146106145110141112135114129114123113118110113106108103105100102097100091098086097078097070097065096060096058096056094055091054086054081054078052076049072049066048059047055046048045043043040042038040035039034038032038030038029038028038027038027038025038025038024038023036023035023033023030023025023023023020024019025019025019027018028018031018032018034018037018039018041018043018046019048022049025051028053030055030057032059032060032061030062030062030</textarea>
<br>
<button onclick="renderSignature()">
Render
</button>

CSS

canvas { border: 1px solid black; }

JavaScript

function parse(sig) {
	var lines = [];
  var i = 0;
  function next() {
  	var n = sig.substr(i,3)|0;
    i+=3;
    return n;
  }
  var count = next();
  for (var l = 0; l < count; l++) {
  	var points = next();
  	var line = { points: [] };
    for (var p = 0; p < points; p++) {
      line.points.push({ x: next(), y: next() });
    }
    if (points > 0) {
    	lines.push(line);
    }
  }
  return lines;
}

function draw(lines) {
	var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.lineWidth = 1;
  ctx.strokeStyle = '#0000FF';
  for (var l = 0; l < lines.length; l++) {
  	var points = lines[l].points;
    if (points.length > 0) {
    	ctx.beginPath();
      ctx.moveTo(points[0].x, points[0].y);
      for (var p = 1; p < points.length; p++) {
      	ctx.lineTo(points[p].x, points[p].y);
      }
      ctx.stroke();
    }
  }
}

window.renderSignature = function() {
  draw(parse(sig.value));
}