Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Momo!</title>
</head>
<body>

<canvas id="canvas" width="780" height="390"></canvas>


<script type="text/javascript">

var	canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function draw() {
	//the grid
	for (var i = 0; i*30 <= canvas.width; i++){
		ctx.beingPath;
		ctx.moveTo(30*i, 0);
		ctx.lineTo(30*i, canvas.height);
		ctx.strokeStyle = "red";
		ctx.stroke();

	}

	for (var i = 0; i*30 <= canvas.height; i++){
		ctx.beginPath;
		ctx.moveTo(0, 30*i);
		ctx.lineTo(canvas.width, 30*i);
		ctx.strokeStyle = "red";
		ctx.stroke();


	}

	//the word Momo
	ctx.beingPath;
	ctx.moveTo(50,100);
	ctx.lineTo(50,50);
	ctx.lineTo(60,50);
	ctx.moveTo(50,100);
	ctx.lineTo(60,100);
	ctx.strokeStyle = "#000000"
	ctx.stroke();

}

draw();

</script>
</body>

</html>