8bitdna

Switch off graphics antialiasing

Recommended Posts

Hi All,

Does anyone know how to switch off antialiasing when drawings lines and circles etc?

For example with the following code..

game.module(
    'game.main'
)
.body(function() {

game.createScene('Main', {
    init: function() {
        var grap = new game.Graphics();
        grap.drawCircle(50, 50, 50);
        grap.addTo(this.stage);
    }
});

});

...and config...

game.config = {
    name: '',

    system: {
        width: 100,
        height: 100,
        scale: true,
        center: true,
        resize: false
    },
    
    renderer: {
        scaleMode: 'nearest'
    },

    mobile: {
    }
};

...you'll see the circle with anti aliasing etc, can I switch it off, handy for low res stuff?  Thanks all!

Share this post


Link to post
Share on other sites

I did some research on this and it seems that on canvas you can only disable anti-aliasing on images, but not when drawing shapes. So this affects all HTML5 engines, not just Panda.

If you want crisp pixel perfect graphics, i would recommend to just use images.

Share this post


Link to post
Share on other sites

Thanks @enpu

Been looking at a few posts on Stackoverlfow etc and seeing quite a few folks with the same problem like this..

https://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element

Looks browser controlled and at best hacky to workaround.  I really want it for some lines so I'm thinking a 1px x 1px sprite stretched and rotated using nearest filtering will do the trick.  Cheers.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.