CODEWITHSUNDEEP
javascript
Chiang Cliff
Chiang Cliff

Reputation: 123

Why is my cube showing two times farther than the cursor?

I am an HTML beginner, and I am trying to make a game where you could control the player with your cursor. However, the below page seemingly shows it two times farther than the cursor. Is my code wrong? If yes, where is it wrong? Thank you very much. 

const canvas = document.getElementById('screen');
const ctx = canvas.getContext('2d');
var x = 0;
var y = 0;
canvas.style.top = 0;
canvas.style.left = 0;
function drawPlayer() {
    ctx.fillStyle = "yellow";
    ctx.strokeStyle = "black";
    ctx.lineWidth = 3;
    ctx.fillRect(x, y, 10, 10);
    
    ctx.fillStyle = "white";
    ctx.strokeStyle = "white";
    ctx.lineWidth = 0;
    ctx.fillRect(x + 1, y + 1, 3, 3);
    ctx.fillRect(x + 6, y + 1, 3, 3);
    ctx.fillStyle = "black";
    ctx.strokeStyle = "black";
    ctx.lineWidth = 0;
    ctx.fillRect(x + 2, y + 2, 2, 2);
    ctx.fillRect(x + 7, y + 2, 2, 2);
    ctx.fillStyle = "red";
    ctx.strokeStyle = "red";
    ctx.lineWidth = 0;
    ctx.fillRect(x + 2, y + 6, 6, 2);
}
function handle(event) {
    x = event.offsetX;
    y = event.offsetY;
}
setInterval(function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPlayer();
}, 10)
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cube Quest</title>
    <style>
        canvas {
            width: 100%;
            height: 100%;
            position: absolute;
        }
    </style>
    <script src="game.js"></script>
</head>
<body>
    <canvas id="screen" onmousemove="handle(event)"></canvas>
</body>
</html>

Upvotes: 1

Views: 44

Answers (1)

Terry
Terry

Reputation: 66218

That is because you will need to define the canvas width and height manually, otherwise it falls back to the default values of 300px for width and 150px for height, i.e.:

// Specify the dimensions of the canvas
ctx.canvas.width  = canvas.clientWidth;
ctx.canvas.height = canvas.clientHeight;

You might also want to consider setting the canvas width and height when the viewport is resized. See working example here:

const canvas = document.getElementById('screen');
const ctx = canvas.getContext('2d');
var x = 0;
var y = 0;
canvas.style.top = '0px';
canvas.style.left = '0px';

function setCanvasSize() {
  // Specify the dimensions of the canvas
  ctx.canvas.width  = canvas.clientWidth;
  ctx.canvas.height = canvas.clientHeight;
}

// Set dimensions at runtime
setCanvasSize();

// Set dimensions when window is resized
window.addEventListener('resize', function () {
  setCanvasSize();
});

function drawPlayer() {
    ctx.fillStyle = "yellow";
    ctx.strokeStyle = "black";
    ctx.lineWidth = 3;
    ctx.fillRect(x, y, 10, 10);
    
    ctx.fillStyle = "white";
    ctx.strokeStyle = "white";
    ctx.lineWidth = 0;
    ctx.fillRect(x + 1, y + 1, 3, 3);
    ctx.fillRect(x + 6, y + 1, 3, 3);
    ctx.fillStyle = "black";
    ctx.strokeStyle = "black";
    ctx.lineWidth = 0;
    ctx.fillRect(x + 2, y + 2, 2, 2);
    ctx.fillRect(x + 7, y + 2, 2, 2);
    ctx.fillStyle = "red";
    ctx.strokeStyle = "red";
    ctx.lineWidth = 0;
    ctx.fillRect(x + 2, y + 6, 6, 2);
}
function handle(event) {
    x = event.offsetX;
    y = event.offsetY;
}
setInterval(function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPlayer();
}, 10)
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cube Quest</title>
    <style>
        canvas {
            width: 100%;
            height: 100%;
            position: absolute;
        }
    </style>
    <script src="game.js"></script>
</head>
<body>
    <canvas id="screen" onmousemove="handle(event)"></canvas>
</body>
</html>

Personally, though, I would not try to redraw the canvas using setInterval, because you only want to redraw when mousemove is detected. Your code can be further improved by simply listening to the mousemove event on the canvas element:

const canvas = document.getElementById('screen');
const ctx = canvas.getContext('2d');
var x = 0;
var y = 0;
canvas.style.top = '0px';
canvas.style.left = '0px';

function setCanvasSize() {
  // Specify the dimensions of the canvas
  ctx.canvas.width  = canvas.clientWidth;
  ctx.canvas.height = canvas.clientHeight;
}

// Set dimensions at runtime
setCanvasSize();

// Set dimensions when window is resized
window.addEventListener('resize', function () {
  setCanvasSize();
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawPlayer();
});

function drawPlayer() {
    ctx.fillStyle = "yellow";
    ctx.strokeStyle = "black";
    ctx.lineWidth = 3;
    ctx.fillRect(x, y, 10, 10);
    
    ctx.fillStyle = "white";
    ctx.strokeStyle = "white";
    ctx.lineWidth = 0;
    ctx.fillRect(x + 1, y + 1, 3, 3);
    ctx.fillRect(x + 6, y + 1, 3, 3);
    ctx.fillStyle = "black";
    ctx.strokeStyle = "black";
    ctx.lineWidth = 0;
    ctx.fillRect(x + 2, y + 2, 2, 2);
    ctx.fillRect(x + 7, y + 2, 2, 2);
    ctx.fillStyle = "red";
    ctx.strokeStyle = "red";
    ctx.lineWidth = 0;
    ctx.fillRect(x + 2, y + 6, 6, 2);
}
function handle(event) {
    x = event.offsetX;
    y = event.offsetY;
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPlayer();
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cube Quest</title>
    <style>
        canvas {
            width: 100%;
            height: 100%;
            position: absolute;
        }
    </style>
</head>
<body>
    <canvas id="screen" onmousemove="handle(event)"></canvas>
</body>
</html>

Upvotes: 1

Related Questions