Creating BMP Images from C

Community
1

Creating BMP Images

ex:

in html use canvas using dots ,
Use white background .
Draw a house as red line square sides.
In square Add 2 gray square windows and 1 door .
Add black triangle roof.
Add green grass random height vertical spaced lines in front .
Add mailbox in front.

Image on Browser (code is listed after) :

image

2

Generated code from above - that displays the image above.

<!DOCTYPE html>
<html>
<head>
	<title>House Drawing</title>
	<style>
		canvas {
			background-color: white;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="500" height="500"></canvas>
	<script>
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");

		// Draw house
		ctx.beginPath();
		ctx.strokeStyle = "red";
		ctx.lineWidth = 2;
		ctx.moveTo(100, 200);
		ctx.lineTo(400, 200);
		ctx.lineTo(400, 400);
		ctx.lineTo(100, 400);
		ctx.closePath();
		ctx.stroke();

		// Draw roof
		ctx.beginPath();
		ctx.fillStyle = "black";
		ctx.moveTo(100, 200);
		ctx.lineTo(250, 100);
		ctx.lineTo(400, 200);
		ctx.closePath();
		ctx.fill();

		// Draw windows
		ctx.fillStyle = "gray";
		ctx.fillRect(150, 250, 50, 50);
		ctx.fillRect(300, 250, 50, 50);

		// Draw door
		ctx.fillStyle = "gray";
		ctx.fillRect(225, 300, 50, 100);

		// Draw grass
		ctx.beginPath();
		ctx.strokeStyle = "green";
		for (var i = 100; i <= 400; i += 10) {
			var y = Math.random() * 20 + 380;
			ctx.moveTo(i, 400);
			ctx.lineTo(i, y);
		}
		ctx.stroke();

		// Draw mailbox
		ctx.beginPath();
		ctx.strokeStyle = "black";
		ctx.fillStyle = "gray";
		ctx.fillRect(70, 350, 20, 30);
		ctx.moveTo(90, 365);
		ctx.arc(90, 365, 5, 0, 2*Math.PI);
		ctx.stroke();
	</script>
</body>
</html>