Image

Drawing images is very easy in oCanvas. Just specify the position and the path to the image file, or an HTML image element, and add it to the canvas. You can even tile the image very easily using only a few options.

Note: The image path (or element) will try to load after it's been passed to oCanvas. If it has been preloaded prior to that, it might pick it from the cache, but it will still be asynchronous. That means, the image will most likely not be rendered right when you add it to the canvas, but oCanvas will render it when it has loaded.

Properties

height : Number: The height of the object.
image : String or HTMLImageElement: If a string is specified, it is interpreted as a path to the image. If it is an HTMLImageElement, it will use that image.
loaded : Boolean: Describes if the image has loaded yet.
tile : Boolean: Determines if the image should be tiled or not. If this is true, it uses the other tile properties to draw the image multiple times as one single display object.
tile_height : Number: The height of one image instance.
tile_spacing_x : Number: The horizontal spacing between each image instance.
tile_spacing_y : Number: The vertical spacing between each image instance.
tile_width : Number: The width of one image instance.
width : Number: The width of the object.

Examples

Example 1

We start by creating a new core instance. Then we create an image and add it to the canvas.

View Example

Code

var canvas = oCanvas.create({
	canvas: "#canvas"
});

var image = canvas.display.image({
	x: 177,
	y: 120,
	origin: { x: "center", y: "center" },
	image: "img/html5-logo.png"
});

canvas.addChild(image);

Output

Example 2

We start by creating a new core instance. Then we create an image, where we specify the tile options to lay out the image multiple times inside of the same display object. Finally we add it to the canvas.

View Example

Code

var canvas = oCanvas.create({
	canvas: "#canvas"
});

var image = canvas.display.image({
	x: 177,
	y: 180,
	origin: { x: "center", y: "center" },
	image: "img/html5-logo.png",
	tile: true,
	tile_width: 40,
	tile_height: 40,
	tile_spacing_x: 5,
	tile_spacing_y: 10,
	width: 175,
	height: 190
});

canvas.addChild(image);

Output