TS canvas jak zrobić lepszą jakość

Question

Co moge zrobić żeby rzeczy w canvasie były w większej rozdzielczości (nierozmazane)

const 
    GameObjects = [];

var times = [];
var fps;
    
function refreshLoop() {
    window.requestAnimationFrame(function() {
        const now = performance.now();
        while (times.length > 0 && times[0] <= now - 1000) {
          times.shift();
        }
        times.push(now);
        fps = times.length;
        refreshLoop();
    });
}
    
refreshLoop();

class CanvasController {
    constructor (canvas) {
        console.log("CanvasController Initialized")
    }

    update (ctx, canvas, plr) {
        // BACKGROUND
        ctx.fillStyle = '#151515';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // FPS
        ctx.fillStyle = "white"
        ctx.font = "10px sans-serif";
        ctx.fillText(`FPS:${fps}`, 2, canvas.height-2);
        
        // DRAWING PLAYER
        const Img = document.querySelector('img')
        ctx.drawImage(Img, 0, 0, 16, 16);
    }
}

class Player {
    constructor () {
        const _plr = {
            x:0,
            y:0,
            rot:0,
            img: './slav.png'
        }; 
        return _plr;
    }
}

const
    canvas = document.querySelector('canvas'),
    ctx = canvas.getContext("2d"),
    plr = new Player(),
    cc = new CanvasController(ctx);



function FixedUpdate(){
    cc.update(ctx, canvas, plr)
    setTimeout(FixedUpdate, fps)
}
FixedUpdate();

Answer 1

Zgaduję że:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled

Comments

niepomogło :(

---

Ustawiłeś na false?

---

na true

---

...true jest domyślne. A przecież chodzi właśnie o to, żeby nie wygładzał, nie?

Answer 2

Ustaw rozmiar canvasa:

const canvas = document.querySelector('canvas');
canvas.width = 1280
canvas.height = 720 // albo inne wartości

Pamiętaj, że tyle samo pixeli też powinno się ustawić w css, żeby uniknąć skalowania.

No i warto jeszcze ustawić listenera na resize event, żeby ustawiać rozmiar canvasa przy zamianie rozmiaru okna