Crafty.pixelart()

src/graphics/drawing.js#L26-L62
public void Crafty.pixelart(Boolean enabled)
enabled

whether to preserve sharp edges when rendering images

Sets the image smoothing for drawing images (for all layer types).

Setting this to true disables smoothing for images, which is the preferred way for drawing pixel art. Defaults to false.

This feature is experimental and you should be careful with cross-browser compatibility. The best way to disable image smoothing is to use the Canvas render method and the Sprite component for drawing your entities.

If you want to switch modes in the middle of a scene, be aware that canvas entities won't be drawn in the new style until something else invalidates them. (You can manually invalidate all canvas entities with Crafty("Canvas").trigger("Invalidate");)

Note: Firefox_26 currently has a bug which prevents disabling image smoothing for Canvas entities that use the Image component. Use the Sprite component instead.

Note: Webkit (Chrome & Safari) currently has a bug link1 link2 that prevents disabling image smoothing for DOM entities.

Example

This is the preferred way to draw pixel art with the best cross-browser compatibility.

Crafty.pixelart(true);

Crafty.sprite(imgWidth, imgHeight, "spriteMap.png", {sprite1:[0,0]});
Crafty.e("2D, Canvas, sprite1");