Good afternoon! Well, just like that, it turns out that the canvas is out of focus... I don't understand why if it isn't out of focus with other projects! It doesn't help me to use:
image-rendering: pixelated;
of css, since this solves the problem only for those elements that do not have curves... but it turns out that my canvas has elements with curves, like the ball (Which is a circle made with the arc function) and the text, the canvas It looks like this... (Open the image to see it as I see it on my pc):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script src="scripts/ball.js"></script>
<script src="scripts/bar.js"></script>
<script src="scripts/arkanoid.js"></script>
<script src="scripts/assets.js"></script>
<script src="scripts/main.js"></script>
<title>Arkanoid</title>
</head>
<body>
<canvas id="canvas">¡Este elemento no esta soportado para su navegador!</canvas>
</body>
</html>
And this is the css:
*{
margin: 0;
padding: 0;
}
canvas{
display: block;
width: 100vw;
height: 100vh;
}
The thing is that I don't think it's because of the width: 100vw and height: 100vh, since I have another game in which I use one of these two measurements (The vh), and it doesn't blur at all, it's perfect! another game uses the 100vh measurement. and I put a static measure in the width in pixels and nothing blurs... Not even the text! I don't understand why in this one...
postscript: if i use:
image-rendering: pixelated;
the text and the ball no longer look out of focus but rather look very pixelated.
This happens because you stretch the canvas so that it covers the entire window. The solution is:
delete these two rules from the css:
width: 100vw; height: 100vh;
uses javascript to give the canvas a height and width:
canvas.width = window.innerWidth; canvas.height = window.innerHeight;
3. You will also need to use an event listener to detect when the window resizes (
resize
) and recalculate the size of the canvasNOTE: the event
resize
is fired with a very high frequency, and this makes it unsuitable for complicated tasks like recalculating positions of DOM elements.setTimeout
In order to do this it is recommended to use the or methodrequestAnimationFrame
to reduce the frequency with which the event is firedresize
.where
init()
is a function that handles everything.