image

Image

Image rendering.

Examples

// This will override the native Image class !
import { Image } from "pencil.js";

const position = [100, 200];
const url = "url/to/my/file.png";
const options = {
    fill: "black",
    description: "Cutest cat ever !"
};
const image = new Image(position, url, options);
image.on("ready", () => {
    console.log("Image is loaded");
});

// Can be use to preload a bunch of images
Image.load([url1, url2, url3]).then(() => {
    console.log("Images ready");
});

Be aware that this example overrides Javascript's Image global. Use namespace to avoid this issue.

import * as Namespace from "@pencil.js/image";
new Namespace.Image();

ImageOptions

Inherit from RectangleOptions.

Name	Type	Default	Comment
fill	Color or String	null	Background color for transparent images
description	String	""	Accessibility description of the image