create a blue square in the center of the screen in javascript
<!DOCTYPE html><html><head><title>Blue Square</title></head><body><canvasid="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 canvasvar 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.