Image Component

Draw an image with or without repeating (tiling).


Back to top



when the image is loaded
public this .image(String url[, String repeat])

URL of the image


If the image should be repeated to fill the entity. This follows CSS syntax: ("no-repeat", "repeat", "repeat-x", "repeat-y"), but defaults to no-repeat.

Draw the specified image.

Note: The default value of repeat is no-repeat, which is different than the standard CSS default

If the width and height are 0 and repeat is set to no-repeat the width and height will automatically assume that of the image. This is an easy way to create an image without needing sprites.

If set to no-repeat and given dimensions larger than that of the image, the exact appearance will depend on what renderer (WebGL, DOM, or Canvas) is used.


Will default to no-repeat. Entity width and height will be set to the images width and height

var ent = Crafty.e("2D, DOM, Image").image("myimage.png");

Create a repeating background.

var bg = Crafty.e("2D, DOM, Image")
             .attr({w: Crafty.viewport.width, h: Crafty.viewport.height})
             .image("bg.png", "repeat");