WebImage

WebImage

A WebImage is used to display an image from a URL or underlying image data.

Constructor

new WebImage(filename)

Source:
Example
const image = new WebImage('https://en.wikipedia.org/static/images/project-logos/enwiki.png');
Parameters:
Name Type Description
filename string Filepath to the image

Extends

Members

imageLoaded :boolean

Source:
Indicates whether the image has already perfomed initial load
Type:
  • boolean

layer

Source:
Overrides:
Sets the layer of the Thing and marks the sortInvalidated flag so any Graphics instances drawing it know to re-sort.

Methods

checkDimensions()

Source:
Reinforce the dimensions of the WebImage based on the image it displays.

containsPoint(x, y) → {boolean}

Source:
Overrides:
Checks if the passed point is contained in the WebImage.
Parameters:
Name Type Description
x number The x coordinate of the point being tested.
y number The y coordinate of the point being tested.
Returns:
Whether the passed point is contained in the WebImage.
Type
boolean

describe()

Source:
Overrides:
Describes the element for use with screen readers. This isn't something you should need to call manually, but you can if you'd like to print a text descriptino of the Thing.

draw(context)

Source:
Overrides:
Draws the WebImage in the canvas.
Parameters:
Name Type Description
context CanvasRenderingContext2D Context to be drawn on.

focus()

Source:
Overrides:
Focuses the element for use with screen readers. This isn't something you should need to call manually, but you can if you'd like to provide focus to an element even if it wasn't navigated to with the keyboard.

getAlpha(x, y) → {integer}

Source:
Get the alpha value at a given location in the image.
Parameters:
Name Type Description
x number The x coordinate of the point being tested.
y number The y coordinate of the point being tested.
Returns:
An integer between 0 and 255.
Type
integer

getAnchor() → {Object}

Source:
Overrides:
Gets the element's anchor.
Returns:
Type
Object

getBlue(x, y) → {integer}

Source:
Get the blue value at a given location in the image.
Parameters:
Name Type Description
x number The x coordinate of the point being tested.
y number The y coordinate of the point being tested.
Returns:
An integer between 0 and 255.
Type
integer

getBorderColor() → {Color}

Source:
Overrides:
Gets the border color of a Thing.
Example
// this method is on every Shape
let thing = new Thing();
thing.getBorderColor();
Returns:
The color of the Thing's border.
Type
Color

getBorderWidth() → {number}

Source:
Overrides:
Gets the width of the Thing's border.
Example
// this method is on every Shape
let thing = new Thing();
thing.getBorderWidth();
Returns:
The width of the Thing's border.
Type
number

getBounds() → {Object}

Source:
Overrides:
Get the elements bounds. This is an internal property that you shouldn't need to use, but it can be useful for doing quick calculations for the bounding box of a shape.
Example
// this method is on every Shape
let thing = new Thing();
let height = thing.getBounds().bottom - this.getBounds().top;
Returns:
Type
Object

getColor() → {Color}

Source:
Overrides:
Gets the color of a Thing.
Example
// this method is on every Shape
let thing = new Thing();
thing.getColor(); // #000000, by default
Returns:
The destination y coordinate of this Thing.
Type
Color

getGreen(x, y) → {integer}

Source:
Get the green value at a given location in the image.
Parameters:
Name Type Description
x number The x coordinate of the point being tested.
y number The y coordinate of the point being tested.
Returns:
An integer between 0 and 255.
Type
integer

getHeight() → {number}

Source:
Gets the height of the WebImage.
Returns:
Height of the WebImage.
Type
number

getPixel(x, y) → {array}

Source:
Gets a pixel at the given x and y coordinates. Read more here: https://developer.mozilla.org/en-US/docs/Web/API/ImageData/data
Parameters:
Name Type Description
x number The x coordinate of the point being tested.
y number The y coordinate of the point being tested.
Returns:
An array of 4 numbers representing the (r,g,b,a) values of the pixel at that coordinate.
Type
array

getRed(x, y) → {integer}

Source:
Get the red value at a given location in the image.
Parameters:
Name Type Description
x number The x coordinate of the point being tested.
y number The y coordinate of the point being tested.
Returns:
An integer between 0 and 255.
Type
integer

getType() → {string}

Source:
Overrides:
Get the .type of the Thing
Returns:
Type
string

getWidth() → {number}

Source:
Gets the width of the WebImage.
Returns:
Width of the WebImage.
Type
number

getX() → {number}

Source:
Overrides:
Gets the x position of the Thing.
Example
thing.x === thing.getX();
Returns:
The x position of the Thing.
Type
number

getY() → {number}

Source:
Overrides:
Gets the y position of the Thing.
Example
thing.y === thing.getY();
Returns:
The y position of the Thing.
Type
number

hasBorder() → {boolean}

Source:
Overrides:
Returns if a Thing has a border.
Example
// this method is on every Shape
let thing = new Thing();
thing.hasBorder();
Returns:
True if the Thing has a border.
Type
boolean

isFilled() → {boolean}

Source:
Overrides:
Returns if a Thing is filled.
Example
// this method is on every Shape
let thing = new Thing();
thing.isFilled();
Returns:
True if the Thing is filled.
Type
boolean

loaded(callback)

Source:
Set a function to be called when the WebImage is loaded.
Parameters:
Name Type Description
callback function A function

loadPixelData()

Source:
Return the underlying ImageData for this image. Read more at https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData

move(dx, dy)

Source:
Overrides:
Changes the possition of a thing by a specified x and y amount.
Example
// this method is on every Shape
let thing = new Thing();
thing.move(10, 10);
Parameters:
Name Type Description
dx number The resulting change in the Thing's x position.
dy number The resulting change in the Thing's y position.

rotate(degrees, angleUnit)

Source:
Overrides:
Rotates a Thing an additional amount of degrees.
Example
// this method is on every Shape
let thing = new Thing();
thing.rotate(90);
thing.rotate(Math.PI / 2, Thing.RADIANS);
Parameters:
Name Type Description
degrees number The degrees to rotate degrees.
angleUnit number Whether it is degrees or radians. Defaults to degrees.

setAlpha(x, y, val)

Source:
Set the alpha value at a given location in the image to `val`.
Parameters:
Name Type Description
x number The x coordinate of the point being tested.
y number The y coordinate of the point being tested.
val integer The desired value of the alpha component at the pixel. Must be between 0 and 255.

setAnchor(anchor)

Source:
Overrides:
Sets the Anchor for the object. This alters how the shape will draw relative to its position. An anchor of 0, 0 will cause the shape to draw with its position at its top left corner. An anchor of 1, 1 will cause the shape to draw with its position at its bottom right corner.
Example
// this method is on every Shape
let thing = new Thing();
// center the object around its position
thing.setPosition({vertical: 0.5, horizontal: 0.5});
Parameters:
Name Type Description
anchor Object

setBlue(x, y, val)

Source:
Set the blue value at a given location in the image to `val`.
Parameters:
Name Type Description
x number The x coordinate of the point being tested.
y number The y coordinate of the point being tested.
val integer The desired value of the blue component at the pixel. Must be between 0 and 255.

setBorder(hasBorder)

Source:
Overrides:
Sets a Thing object to filled. Throws an error if an argument is not passed.
Example
// this method is on every Shape
let thing = new Thing();
thing.setBorder(true);
Parameters:
Name Type Description
hasBorder bool A boolean of whether or not Thing has a border.

setBorderColor(color)

Source:
Overrides:
Sets the border color of a Thing. Throws an error if there are fewer than 1 params or if the param is undefined. This will automatically give the Thing a border, as if you had called thing.setBorder(true);
Example
// this method is on every Shape
let thing = new Thing();
thing.setBorderColor('orange');
Parameters:
Name Type Description
color Color The resulting color of the Thing's border.

setBorderWidth(width)

Source:
Overrides:
Sets the width of a Thing's border. Throws an error if there is not 1 argument. This will automatically set the Thing to draw with a border, as if you had called thing.setBorder(true);
Example
// this method is on every Shape
let thing = new Thing();
thing.setBorderWidth(5);
Parameters:
Name Type Description
width number The resulting width of the Thing's border.

setColor(color)

Source:
Overrides:
Sets the color of a Thing. Throws an error if there are fewer than 1 params or if the param is undefined.
Example
// this method is on every Shape
let thing = new Thing();
thing.setColor('red');
thing.setColor(Color.orange);
thing.setColor('#ff0000');
Parameters:
Name Type Description
color Color The resulting color of Thing.

setFilled(filled)

Source:
Overrides:
Sets a Thing object to filled. Throws an error if an argument is not passed.
Example
// this method is on every Shape
let thing = new Thing();
thing.setFilled(false);
Parameters:
Name Type Description
filled bool A boolean of whether or not Thing is filled.

setGreen(x, y, val)

Source:
Set the green value at a given location in the image to `val`.
Parameters:
Name Type Description
x number The x coordinate of the point being tested.
y number The y coordinate of the point being tested.
val integer The desired value of the green component at the pixel. Must be between 0 and 255.

setImage(filename)

Source:
Set the image of the WebImage.
Parameters:
Name Type Description
filename string Filepath to the image

setImageData(imageData)

Source:
Replace the underlying ImageData of the WebImage with an instance of the ImageData class.
Example
const imageData = new ImageData(
  new UInt8ClampedArray([255, 0, 0, 255]),
  1,
  1
);
const img = new Webimage('www.whatever.com');
img.setImageData(imageData);
add(img);
Parameters:
Name Type Description
imageData ImageData

setOpacity(opacity)

Source:
Overrides:
Set the opacity of the Thing.
Example
// this method is on every Shape
let thing = new Thing();
thing.setOpacity(0.5);
Parameters:
Name Type Description
opacity number

setPixel(x, y, component, val)

Source:
Set the `component` value at a given location in the image to `val`.
Parameters:
Name Type Description
x number The x coordinate of the point being tested.
y number The y coordinate of the point being tested.
component integer Integer representing the color value to be set. R, G, B = 0, 1, 2, respectively.
val integer The desired value of the `component` at the pixel. Must be between 0 and 255.

setPosition(x, y)

Source:
Overrides:
Sets the position of a Thing. Throws an error if there are fewer than 2 params or if they are not numbers.
Example
// this method is on every Shape
let thing = new Thing();
thing.setPosition(30, 30);
Parameters:
Name Type Description
x number The destination x coordinate of this Thing.
y number The destination y coordinate of this Thing.

setRed(x, y, val)

Source:
Set the red value at a given location in the image to `val`.
Parameters:
Name Type Description
x number The x coordinate of the point being tested.
y number The y coordinate of the point being tested.
val integer The desired value of the red component at the pixel. Must be between 0 and 255.

setRotation(degrees, angleUnit)

Source:
Overrides:
Sets the rotation of a Thing in degrees. Throws an error if there are fewer than 1 params or if they are not numbers.
Example
// this method is on every Shape
let thing = new Thing();
thing.setRotation(90);
thing.setRotation(Math.PI / 2, Thing.RADIANS);
Parameters:
Name Type Description
degrees number The degrees to rotate degrees.
angleUnit number Whether it is degrees or radians. Defaults to degrees.

setSize(width, height)

Source:
Sets the size of the WebImage.
Parameters:
Name Type Description
width number The desired width of the resulting WebImage.
height number The desired height of the resulting WebImage.

setType(type)

Source:
Overrides:
Set the .type of the Thing
Parameters:
Name Type Description
type string new type

unfocus()

Source:
Overrides:
Unfocuses the element for use with screen readers. This isn't something you should need to call manually, but you can if you'd like to unfocus to an element even if it wasn't navigated from with the keyboard.

updateHiddenCanvas()

Source:
Update the hidden canvas with the instance's current data. This is automatically called after operations that modify ImageData.