namin/index.html

## index.html
<html>
<head>
<style>
  * { margin: 0; padding: 0; overflow: hidden;}
  #canvas { display: block; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
window.onload = function() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var W = window.innerWidth, H = window.innerHeight;
  canvas.width = W; canvas.height = H;
  function cantor(x, y, len)
  {
    if (len >= 1) {
      ctx.strokeStyle = "black";
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x+len, y);
      ctx.lineWidth = 5;
      ctx.stroke();
      y += 20;
      cantor(x, y, len/3);
      cantor(x+len*2/3, y, len/3);
    }
  }
  cantor(10, 10, W-20);
}
</script>
</body>
</html>
	<html>
	<head>
	<style>
	* { margin: 0; padding: 0; overflow: hidden;}
	#canvas { display: block; }
	</style>
	</head>
	<body>
	<canvas id="canvas"></canvas>
	<script>
	window.onload = function() {
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var W = window.innerWidth, H = window.innerHeight;
	canvas.width = W; canvas.height = H;
	function cantor(x, y, len)
	{
	if (len >= 1) {
	ctx.strokeStyle = "black";
	ctx.beginPath();
	ctx.moveTo(x, y);
	ctx.lineTo(x+len, y);
	ctx.lineWidth = 5;
	ctx.stroke();
	y += 20;
	cantor(x, y, len/3);
	cantor(x+len*2/3, y, len/3);
	}
	}
	cantor(10, 10, W-20);
	}
	</script>
	</body>
	</html>