<script>

"use strict";

​

var c, r, w, h, u = [], v = [], uu = [], vv = [];

uu = [[443,435,432,455,501,538],[465,461,486,505,508],[492,483,485,491],[575,580,603,627,643,649],[591,593,615,628],[605,608,615],[431,486,527],[584,621,655],[527,549,570,583],[454,467,463,488,477,497,501,514],[659,633,638,618,623,607,606,595],[463,473,458],[591,601,593],[442,437,455,497,537],[575,591,615,636,645],[445,455,469,472],[603,600,587,575],[452,435,427,427],[642,648,635],[447,495,526],[581,622,651],[445,488,521],[582,624,661],[457,457,476,491,499],[587,596,611,626,628],[433,426,407,391,429,433],[430,421,413,411,430,430],[432,420,409,394,419,426],[434,434,429,423,426,441,443],[625,643,656,632,631],[653,681,681,655,645],[391,419,443,459],[586,625,665],[413,424,447],[593,628,651],[387,376,377,388],[356,387,397],[396,419,445],[373,427,438],[689,687,679],[721,687,669],[683,677,671],[675,695,701],[671,661],[665,678,690,691],[375,400,417],[385,408,414],[449,528,574,650],[345,361,419],[347,347,385],[686,695,697],[673,679,677],[700,715,707],[415,417,410],[438,428,404],[441,458,457],[657,692,699],[668,683,713],[685,691,713],[395,400,387],[501,486,479],[608,620],[503,553],[499,547],[495,549],[693,668,621],[355,353,383],[344,355,386]];

vv = [[277,208,139,115,164,250],[241,197,195,237,248],[233,214,239,249],[244,183,116,119,190,258],[229,199,191,242],[241,213,242],[294,268,261],[257,256,276],[305,342,337,309],[307,327,293,314,284,291,275,283],[290,315,283,297,272,287,269,277],[217,224,201],[205,215,195],[252,153,131,163,240],[238,151,129,183,252],[257,246,250,264],[247,235,233,238],[267,229,187,143],[259,183,132],[272,262,263],[258,249,263],[297,273,265],[259,245,249],[222,194,189,197,219],[213,193,188,205,235],[212,198,181,175,191,194],[169,145,127,125,149,149],[196,177,160,146,164,170],[151,129,107,81,79,112,119],[132,112,77,133,135],[151,115,113,157,167],[135,98,85,82],[84,78,99],[135,103,88],[87,87,103],[107,170,222,247],[187,241,253],[206,282,315],[272,301,303],[205,268,295],[235,289,302],[171,228,246],[244,209,181],[179,212],[205,193,166,146],[181,215,227],[229,231,230],[332,357,354,323],[184,263,309],[161,109,49],[219,185,149],[181,144,129],[259,215,175],[328,369,383],[335,380,393],[391,366,359],[327,357,357],[307,346,354],[300,329,341],[303,335,351],[349,383,385],[341,382],[357,361],[365,362],[373,363],[99,56,29],[160,113,65],[173,225,261]];

​

function main() {

  var d = document, b = d.body, s = b.style;

  s.border = s.margin = s.padding = 0;

  c = d.createElement('canvas');

  c = b.appendChild(c);

  w = c.width  = window.innerWidth;

  h = c.height = window.innerHeight;

  r = c.getContext('2d');

  draw();

}

​

function kdown(e) {

  switch(e.key) {

    case 'z':

      if(Math.max(u.length, v.length) > 0) {

        u.length = 0;

        v.length = 0;

        break;

      }

      uu.pop();

      vv.pop();

      break;

  }

  draw();

}

​

function click(e) {

  u.push(e.clientX);

  v.push(e.clientY);

  draw();

}

​

function rclick(e) {

  uu.push(u);

  vv.push(v);

  u = [];

  v = [];

  draw();

  return false;

}

​

function draw() {

  var px, nx, f;

  r.clearRect(0, 0, w, h);

  r.textBaseline = 'top';

  r.fillStyle = '#222', r.fillText("Actions: draw (lclick), finish (rclick), undo (z)", 0, 0);

  r.lineWidth = 3, r.fillStyle = r.strokeStyle = '#888', poly(u, v);

  r.strokeStyle = '#444', bez(u, v);

  for(f = 0; f < Math.min(uu.length, vv.length); f += 1) {

    r.strokeStyle = '#222', bez(uu[f], vv[f]);

  }

}

​

function bez(u, v) {

  var f, l, e;

  e = 10**-10;

  l = Math.min(u.length, v.length);

  for(f = 0;;f += 1) {

    var p, s, n, s1, s2, s3, s4, s5, uu, vv, UU, VV;

    p = Math.max(f - 1, 0 - 0);

    s = Math.min(f + 1, l - 1);

    n = Math.min(f + 2, l - 1);

    r.beginPath();

    r.moveTo(u[f], v[f]);

    r.bezierCurveTo(

      (u[s]-u[p])/5+u[f],

      (v[s]-v[p])/5+v[f],

      (u[f]-u[n])/5+u[s],

      (v[f]-v[n])/5+v[s],

      u[s],

      v[s]

    );

    r.stroke();

    if(s >= l - 1) break;

  }

}

​

function poly(u, v) {

  var p, n;

  for(p = 0; p < u.length-1; p += 1) {

    n = (p + 1) % u.length;

    r.fillRect(u[p]-2, v[p]-2, 5, 5);

    r.fillRect(u[n]-2, v[n]-2, 5, 5);

    r.beginPath();

    r.moveTo(u[p], v[p]);

    r.lineTo(u[n], v[n]);

    r.stroke();

  }

}

​

window.onload = main;

window.onclick = click;

window.onkeydown = kdown;

window.oncontextmenu = rclick;

</script>

​