HTML5 crispy edges pixel graphics

axgs

New member
Joined
Sep 11, 2022
Messages
1
Hi! it´s is possible to avoid blurrying of scaled images in HTML5 canvas. I added some CSS to the CerberusGame.html, that works, but it´s much nicer to set this in the cerberus code. I only use mojo1 graphics (drawImageRect). Any advice? thanks.
 
What did you do in CSS?
 
@axgs I will look at a solution to do this from cerberus code at the weekend. There is a flag called #MOJO_IMAGE_FILTERING_ENABLED and that might be the right one, but for now it doesn't work with the html5 target. So far I know that you have to use multiple settings to make most of the browsers disable linear filtering on the canvas. Something like:

JavaScript:
graphicsContext.mozImageSmoothingEnabled = false;
graphicsContext.webkitImageSmoothingEnabled = false;
graphicsContext.msImageSmoothingEnabled = false;
graphicsContext.imageSmoothingEnabled = false;
graphicsContext.oImageSmoothingEnabled= false;

@Wingnut I think you mixed things up with the flag for image loading. Mojo1 doesn't support flags for mipmaps and linear filtering like mojo2 does. And the correct flag for mojo2 images is 0, if you want nearest filtering for the pixelated look.
 
@axgs Here is a changed file to test, if it works for you. It now sets the filter argument for the canvas.graphicscontext before rendering a frame.
Just replace the file with the existing one in \cerberus\modules\mojo\native and don't forget to make a copy of the old file. Just in case ;-)

Edit: Don't forget to set #MOJO_IMAGE_FILTERING_ENABLED=False to see the pixelated effect!
 

Attachments

  • mojo.html5.js
    19.2 KB · Views: 51
Last edited:
That's interesting. I am working on a roguelike which I develop in HTML and am always amazed how much better the graphics look when I do a desktop build.
 
Back
Top Bottom