Gosper Curve

<!DOCTYPE html>
<html>
  <head>
    <title>noises</title>
    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
  </head>
  <body>
    <style type='text/css'>
      body {
        margin:0;
        padding:0;
        font:12px/20px 'Helvetica';
      }
      div {
        float:left;
        padding:5px;
      }
    </style>
<script type='text/javascript'>
window.onload = function() {
  var container = document.body.appendChild(document.createElement('div'));
  var c = container.appendChild(document.createElement('canvas'));
  var ctx = c.getContext('2d');
  c.width = 1000;
  c.height = 1000;

ctx.fillStyle = '#fff';
  ctx.fillRect(0, 0, 1000, 1000);

var turtle = [0, 0, 0];

function rt(x) {
    turtle[2] += x;
  }

function lt(x) {
    turtle[2] -= x;
  }

ctx.strokeStyle = '#111';
  function fd(dist) {
    ctx.beginPath();
    ctx.moveTo(turtle[0], turtle[1]);
    var dir = turtle[2] * (Math.PI/180);
    turtle[0] += Math.cos(dir) * dist;
    turtle[1] += Math.sin(dir) * dist;
    ctx.lineTo(turtle[0], turtle[1]);
    ctx.stroke();
  }

ctx.translate(600, 100);
  rg(5, 600, turtle);
  ctx.restore();

}
</script>
</html>