Graphic

Graphic wraps one browser image with its logical dimensions and can draw the entire image to a canvas. Images creates and stores graphics from named image definitions; Sprite uses a graphic when it needs only part of an image.

Quick Start

const logo = new Graphic('/images/logo.png', 128, 64);

logo.render(context, 24, 24);
logo.render(context, 24, 104, 64, 32);

flowchart LR
	A[Graphic path width height] --> B[Create browser Image]
	B --> C[Set image source]
	D[render context x y width height] --> E[Draw complete image]
	C --> E

Constructor

new Graphic(path, width, height)

new Graphic(path, width, height);

Creates an Image with the supplied logical width and height, then starts loading path by assigning it to image.src.

Parameter	Description
path	URL of the image file.
width	Default destination width in canvas coordinates.
height	Default destination height in canvas coordinates.

Properties

Property	Description
image	The underlying browser HTMLImageElement.
width	The default drawing width.
height	The default drawing height.

render(context, x, y, width, height)

graphic.render(context, x, y, width, height);

Draws the entire image at x, y. Omit width and height to use the dimensions supplied to the constructor.

graphic.render(context, 24, 24); // 128 × 64
graphic.render(context, 24, 104, 64, 32); // Scaled to 64 × 32

Use Images.render() when drawing a named image at its default size. Use Sprite to draw one source rectangle from a sheet rather than the entire image.

Image loading is asynchronous

Construction starts loading but does not wait for the file. The browser may have nothing to draw on the first frame. Ensure image definitions are created during setup and avoid assuming that assigning image.src makes an image immediately ready.