Why are my bitmap images appearing aliased in canvas using EaselJS?

Question

I am making a card game using the HTML5 canvas and the CreateJS library.

I have card images (png) which I scale down by a factor of 10, and then display them on the canvas. For some reason they always appear aliased (on all browsers and all operating systems).

Below is a code extract demonstrating how I add the card to the stage.

var card = new createjs.Bitmap("images/two_of_hearts.png");
card.setTransform(100, 100, .1, .1);
stage.addChild(card);
stage.update();

As I said, I have tried this on multiple browsers, and the same appears on all of them. I found some people talking about using the AlphaMaskFilter, which might do the job, but I found no documentation telling me how I should use the AlphaMaskFilter.

Any ideas? How do I make my cards antialiased or how do I use the AlphaMaskFilter to achieve antialiasing?

Answer 1

Your problem is that you are scaling graphics, and by a factor of 10! Scaling images results in aliased images when the resulting image's size is dramatically different. I suggest you create additional images at the size you need. Doing this gives you complete control over how those images look. If you insist on using the larger images and scaling them, you need to scale them with several steps to mitigate the aliasing. Here's an example using a raw canvas.