I've noticed that our Coats of Arms are not neatly scaled up when the charge is larger than the original 16x16px and lose their pixely aestethic a bit.
The problem lies in canvas interpolation.
The fix is simple: Add the following line of CSS to the canvas' style:
image-rendering: pixelated;
This is the result:
The fix should work in all modern browsers, I think. I can't guarantee anything for IE, though :D
Lieutenant
I've noticed that our Coats of Arms are not neatly scaled up when the charge is larger than the original 16x16px and lose their pixely aestethic a bit.
The problem lies in canvas interpolation.
The fix is simple: Add the following line of CSS to the canvas' style:
This is the result:
The fix should work in all modern browsers, I think. I can't guarantee anything for IE, though :D
Aerial Emperor
Oh, excellent! Didn't know about that directive. Put it in now, and it appears to work. :D
Lieutenant
Yup, looking good!
Here's a StackOverflow thread on the topic.
I've encountered this problem a lot when developing pixely HTML5 games ;-)
Edit: By the way, why are the CoAs 140x140px? Wouldn't 160px make more sense?
Look at your anchors, for example - they're a bit wonky at 140.
Aerial Emperor
Yeah, I have no idea why I picked 140px instead of 160 or 128. Something to fix at some point.