Question

I’ve read a post , and there’s something call hardware accelerated canvas
The code snippet is

// Setting hardware scaling
canvas.width = 300;
canvas.style.width = window.innerWidth + 'px';
canvas.height = 200;
canvas.style.height = window.innerHeight + 'px';

I dont understand quite well here,How does it make sense ?
Won’t it lower the quality of the content in canvas,like displaying a bigger pixel in it?
Thanks

Answer 1

Apparently, yes it will.

It’s like running a game full screen with a lower resolution like 640×480.

There’s another article covering this.

This is not specific to HTML5 by the way. Most of the modern console games are not internally computed in 720p or 1080p. Almost all of them render the game in lower resolutions (such as 1024×600 for instance) and let the GPU doing the scaling/anti-aliasing process. This could help you boosting the FPS in most cases.