0
\$\begingroup\$

I was making a html game and all the elements are blurry is there a fix to this? I use css but it makes it blurry

Code

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
    width:  75%;
  height: 75%;
  margin: 0;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;
var myObstacles = [];
var myScore;

function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myGamePiece.gravity = 0.05;
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        updateGameArea();
        },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y, type) {
    this.type = type;
    this.score = 0;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;
    this.gravity = 0;
    this.gravitySpeed = 0;
    this.update = function() {
        ctx = myGameArea.context;
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
        this.hitTop();
    }
    this.hitBottom = function() {
    var rockbottom = myGameArea.canvas.height - this.height;
    if (this.y > rockbottom) {
        this.y = rockbottom;
        this.gravitySpeed = 0;
    }
} // This curly brace was missing.

this.hitTop = function() {
    var skyhigh = 0;          // Top of the window.
    if (this.y < skyhigh) {   // Use less-than to check if you're above.
        this.y = skyhigh;
        this.gravitySpeed = 0;
    }
}
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }
}

function updateGameArea() {
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
            return;
        } 
    }
    myGameArea.clear();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || everyinterval(150)) {
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 200;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 50;
        maxGap = 200;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
        myObstacles.push(new component(10, height, "green", x, 0));
        myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
    }
    for (i = 0; i < myObstacles.length; i += 1) {
        myObstacles[i].x += -1;
        myObstacles[i].update();
    }
    myScore.text="SCORE: " + myGameArea.frameNo;
    myScore.update();
    myGamePiece.newPos();
    myGamePiece.update();
}

function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

function accelerate(n) {
    if (!myGameArea.interval) {myGameArea.interval = setInterval(updateGameArea, 20);}

    myGamePiece.gravity = n;
}
</script>
<br>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">ACCELERATE</button>
<p>Click the ACCELERATE button to start the game</p>
<p>How long can you stay alive? Use the ACCELERATE button to stay in the air..</p>
</body>
</html>
\$\endgroup\$
5
  • 2
    \$\begingroup\$ Please do not delete and re-post the same question. If your question isn't getting traction, copying and pasting it will not do better. What you should do instead is to edit your existing question to include more information, like research you've done into the matter or approaches you've tried so far to fix it, along with screenshots of the symptoms. \$\endgroup\$
    – DMGregory ♦
    Commented Apr 9, 2021 at 21:36
  • \$\begingroup\$ If you both assign a % size for your canvas and a fixed size, which one is getting taken in the end? or is it using the this.canvas.width but stretches it to fit your % assignment? \$\endgroup\$
    – Zibelas
    Commented Apr 9, 2021 at 21:46
  • \$\begingroup\$ Im guessing its the css streching it but is there a work around \$\endgroup\$
    – Giuca002
    Commented Apr 9, 2021 at 22:45
  • 1
    \$\begingroup\$ "Don't stretch your canvas with CSS" sounds like a pretty simple workaround. 😉 I presume you considered setting the native size of your canvas to match the size you want to display it at? \$\endgroup\$
    – DMGregory ♦
    Commented Apr 10, 2021 at 1:42
  • \$\begingroup\$ Is there a way to auto size it? \$\endgroup\$
    – Giuca002
    Commented Apr 10, 2021 at 17:22

1 Answer 1

Reset to default
0
\$\begingroup\$

Crisp edges css may help. And drawing pixel text from a sprite sheet will be the most crisp vs fillText.

   canvas {
       image-rendering: -moz-crisp-edges;image-rendering: -webkit-crisp-edges;image-rendering: pixelated;image-rendering: crisp-edges;
       border:1px solid #d3d3d3;
       background-color: #f1f1f1;
       width:  75%;
       height: 75%;
       margin: 0;
   }
\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .