HTML5 crispy edges pixel graphics

[axgs]

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.

 

[Phil7]

What did you do in CSS?

 

[Wingnut]

I use this to make it happen for drawarect in mojo2 not sure about mojo1

#HTML5_CANVAS_ANTIALIAS=False

sprites = Image.Load( "sprites.png",0,0,1 ) ' set flag while loading to make sure no antialias

I think the mojo1 loadcommand uses the same flags https://www.cerberus-x.com/cxDocs/Modules_mojo.graphics.html#LoadImage(String,Int,Int,Int,[Int])

 

[Phil7]

@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:

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.

 

[Phil7]

@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!

 

[Gerry Quinn]

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.