4. Images

Image handling

BETA.js provides a few functions to help with loading and handling images. An image is stored as an HTMLImageElement, and are mostly used in BETA.js for rendering images using renderer.drawImage().

BETA.loadImage(url)

Starts loading an image specified by a URL, and returns it. Throws an Error if the URL does not point to a valid image.

var image = BETA.loadImage("https://www.example.com/image.png");

BETA.waitForImgLoad(callback)

Calls a functions when all images fetched via BETA.loadImage() have fully loaded, and can be safely used. Any images loaded via other means are ignored.

var renderer = BETA.getRenderer("myCanvas");

var image1 = BETA.loadImage("https://www.example.com/image1.png");
var image2 = BETA.loadImage("image2.png");
var image3 = BETA.loadImage("file:///C:/Users/username/Downloads/image3.png");

BETA.waitForImgLoad(function ()
{
    renderer.drawImage(image1, {x: 0, y: 0})
    renderer.drawImage(image2, {x: 200, y: 300})
    renderer.drawImage(image3, {x: 0, y: 800});
});

Caution Overriding the onload events of a image fetched via BETA.loadImage() may cause this function to behave unexpectedly.