Switch off graphics antialiasing

[8bitdna]

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!

[enpu]

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.

[8bitdna]

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.

[enpu]

Yeah that sounds like something that should work!