create a blue square in the center of the screen in javascript

<!DOCTYPE html>
<html>
<head>
	<title>Blue Square</title>
</head>
<body>
	<canvas id="myCanvas"></canvas>

	<script>
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");

		// Set canvas width and height
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

		// Draw blue square in the center of the canvas
		var size = 100;
		var x = (canvas.width - size) / 2;
		var y = (canvas.height - size) / 2;
		ctx.fillStyle = "blue";
		ctx.fillRect(x, y, size, size);
	</script>
</body>
</html>
545 chars
26 lines

Explanation:

  • We first get the canvas and its context.
  • Then we set the canvas width and height to be the full size of the window.
  • We calculate the x and y positions of the square to be in the center of the canvas.
  • Finally, we draw a blue square using the fillRect() method.

gistlibby LogSnag