<canvas id="pic" width="1024" height="1024">
	<script>
		var c=document.getElementById("pic");
		var ctx=c.getContext("2d");

		for (var x = 0.5; x < 600; x += 10)
		{
			ctx.moveTo(x, 0);
			ctx.lineTo(x, 500);
			ctx.stroke();
		}
		for (var y = 0.5; y < 500; y += 10)
		{
			ctx.moveTo(0, y);
			ctx.lineTo(600, y);
			ctx.stroke();
		}
		ctx.strokeStyle = '#eee';
		ctx.stroke();

		ctx.beginPath();
		ctx.moveTo(0, 350);
		ctx.lineTo(600, 350);
		ctx.moveTo(250, 0);
		ctx.lineTo(250, 500);

		ctx.strokeStyle = "#000";
		ctx.stroke();
		ctx.moveTo(350,0);
		ctx.lineTo(450,150);
		ctx.stroke();

		ctx.moveTo(350,0);
		ctx.lineTo(250,150);
		ctx.stroke();

		ctx.moveTo(250,150);
		ctx.lineTo(450,150);
		ctx.stroke();

		ctx.moveTo(440,135);
		ctx.lineTo(440,70);
		ctx.stroke();

		ctx.moveTo(410,90);
		ctx.lineTo(410,70);
		ctx.stroke();

		ctx.moveTo(440,70);
		ctx.lineTo(410,70);
		ctx.stroke();

		ctx.moveTo(250,350);
		ctx.lineTo(250,150);
		ctx.stroke();

		ctx.moveTo(450,350);
		ctx.lineTo(450,150);
		ctx.stroke();

		ctx.moveTo(450,350);
		ctx.lineTo(250,350);
		ctx.stroke();

		ctx.moveTo(340,210);
		ctx.lineTo(300,210);
		ctx.stroke();

		ctx.moveTo(340,270);
		ctx.lineTo(300,270);
		ctx.stroke();

		ctx.moveTo(300,270);
		ctx.lineTo(300,210);
		ctx.stroke();

		ctx.moveTo(340,270);
		ctx.lineTo(340,210);
		ctx.stroke();

		ctx.moveTo(340,240);
		ctx.lineTo(300,240);
		ctx.stroke();

		ctx.moveTo(320,270);
		ctx.lineTo(320,210);
		ctx.stroke();

		ctx.moveTo(380,250);
		ctx.lineTo(380,350);
		ctx.stroke();

		ctx.moveTo(430,350);
		ctx.lineTo(430,250);
		ctx.stroke();

		ctx.moveTo(430,250);
		ctx.lineTo(380,250);
		ctx.stroke();

	</script>
</canvas>