I'm just starting to explore html, css, and js, and I'm currently experimenting with canvas. My goal is to create a canvas that dynamically adjusts its size based on the window dimensions. Additionally, I want to draw a smaller rectangle within the canvas to use as the base for a maze game. So far, I've managed to resize the canvas along with the window, but I had to set the body's overflow:hidden property which seems to have caused some issues. When I attempt to draw the inner rectangle by setting its width to half of the window size, it ends up extending beyond the screen boundaries. What am I missing here? I simply want the inner rectangle to be clearly visible within the main canvas area.
JS:
$(document).ready(function() {
var ctx;
var ww;
var wh;
drawCanvas();
$(window).resize(function() {
ctx.clearRect(0, 0, ww, wh);
drawCanvas();
});
function drawCanvas() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ww = window.innerWidth;
wh = window.innerHeight;
ctx.canvas.width = ww;
ctx.canvas.height = wh;
ctx.fillStyle ="blue";
ctx.fillRect(0, 0, ww, wh);
ctx.strokeStyle = 'orange';
ctx.strokeRect(10, 20, ww/2, wh/2);
}
});
HTML:
<html>
<head>
<link href="maze2.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" type="text/javascript" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="maze2.js" type="text/javascript"></script>
<title>Maze</title>
</head>
<body>
<canvas id="canvas">Your browser does not support Canvas.</canvas>
</body>
</html>
CSS:
body {
width: 100%;
height: 100%;
margin:0px;
overflow:hidden;
}
#canvas {
width:100%;
height:100%;
margin:0px;
}