Search code examples
htmlgoogle-chromeantialiasingeaseljscreatejs

createjs bitmap image rotation makes image jagged in chrome

When I try to rotate bitmap image with createjs (not resize, but just rotate) the bitmap image gets jagged in Chrome. In Firefox it is fine.

Here is my code:

var backCard = new createjs.Bitmap(assetsLoader.getResult("back"));
backCard.rotation = 24;
stage.addChild(backCard);
stage.update();

Any ideas on how to fix this ?

Solution

  • I don't know if you want to prevent or enable antialiasing on Chrome, since for me Chrome gets rotated bitmaps antialiased and firefox don't, so I'll talk about both things...

    Enable antialiasing

    There's no way of doing this natively, but you can create a workaround if you really want to force antialiasing: adding a blur filter in really small amounts to rotated images. But keep in mind that blur is a really expensive filter that you should avoid using, but in case you use it, you'll need to cache the bitmap after applying the filter to reduce CPU usage.

    backCard.filters = [new createjs.BlurFilter(2, 2, 1);]; // 2 is blur radius, 1 is blur quality. More quality means more expensive blur.
var bounds = backCard.getBounds();
backCard.cache(bounds.x, bounds.y, bounds.width, bounds.height);

    Prevent antialiasing

    I think there's no way of doing so yet too, but you can use the next version of EaselJS which allows you to define if objects will be antialiased for the stage, because of WebGL. Note that if WebGL isn't supported on the user's browser EaselJS will fallback to HTML5 Canvas, which will still have antialiasing.