0

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?

Illidanek
  • 996
  • 1
  • 18
  • 32
  • AlphaMaskFilter will not help antialias your images. EaselJS draw directly the the stage, and if you scale it down, Canvas doesn't do a great job scaling images down, this might be a fact of life. – Lanny Mar 26 '14 at 17:02

1 Answers1

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.

Community
  • 1
  • 1
FreeAsInBeer
  • 12,937
  • 5
  • 50
  • 82
  • Thanks, I was afraid that's the case. I'll try and play around with SVG images as well as just making new, smaller images, and see how that looks. Step-down scaling seems like it will have too large of an overhead. Btw, any indication on how different is "dramatically different"? Or anywhere I can find out what the limits of reasonable scaling are? – Illidanek Apr 29 '14 at 12:05
  • 1
    I don't know the limits off the top of my head. You were trying to scale to 90% at once. The example I linked to scale to 50% a few times. My guess would be between somewhere between those two values, possibly dependent upon how detailed the picture is. Regarding the overhead of scaling images, it's not a huge deal unless you're scaling dozens (hundreds?) at once, or scaling images on every render. – FreeAsInBeer Apr 29 '14 at 12:53
  • 1
    I decided to bite the bullet and manually resized my original PNG images, using GIMP, to a quarter of their original size. The cards display beautifully and everything works great. Thanks for the help. – Illidanek May 06 '14 at 10:16
  • Hey guys, any ideas on how to apply the stepwise transformation with CreateJS? As the canvas is the container for the CreateJS stage, a direct transformation on it doesn't seem to be the option. Calling setTransform on a BMP and updating stage several times doesn't do the trick. – Simon Lischka Aug 15 '16 at 17:23