Blurry elements in HTML5

programming web dev
1

Hi there,

I’m new to this forum. I create my games using Solar2D, but a disadvantage in HTML5 is that the images and text appear blurry. I’ve found some solutions online, but the main issue is that they all use a ‘2d’ context, while Solar2D uses WebGL (webgl or webgl2). I’m unsure how to adapt the following code:


function fix_dpi() {
          //get DPI
          let dpi = window.devicePixelRatio;
          //get canvas
          let canvas = document.getElementById('canvas');
          //get context
          let ctx = canvas.getContext('2d');
          //get CSS height
          //the + prefix casts it to an integer
          //the slice method gets rid of "px"
          let style_height = +getComputedStyle(canvas).getPropertyValue("height").slice(0, -2);
          //get CSS width
          let style_width = +getComputedStyle(canvas).getPropertyValue("width").slice(0, -2);
          //scale the canvas
          canvas.setAttribute('height', style_height * dpi);
          canvas.setAttribute('width', style_width * dpi);
        }
2

Hi @AleCGames - here is an easier example:

The way to fix the blurriness is to scale the visuals down. When you do that, everything gets smaller. The solution then is to scale everything up first, draw what you need to draw, and then scale things back down again. It’s very primitive, but it does get the job done.

Does that help?

:slight_smile: