Is there a way to fix blurry text/elements

Question

I was making a small browser game and also a website when I started having blurry elements and text is there a way to fix this im using CSS for the canvas. At first when looking around people are saying that Css is the problem ,but they are not presenting a good solution for this problem, I was think why don't I get how big the canvas is then make that how big the canvas is ,but that the problem how I do that without breaking the canvas

This is my 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;

   

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);
    }
}

Adding CSS to the canvas like `width: 75%` is going to stretch and blur the canvas' pixels. Stick to JS to set the element's height and width, e.g. `canvas.width`, using pixels, as you're doing. — ggorlen, Apr 16 '21 at 01:38
Does this answer your question? [Canvas is stretched when using CSS but normal with "width" / "height" properties](https://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties) — ggorlen, Apr 16 '21 at 01:41

Is there a way to fix blurry text/elements

0 Answers0