# Two.Texture

Extends: Two.Shape

Fundamental to work with bitmap data, a.k.a. pregenerated imagery, in Two.js. Supported formats include jpg, png, gif, and tiff. See Two.Texture.RegularExpressions for a full list of supported formats.

# Constructor

Argument Description
src The URL path to an image file or an <img /> element.
callback An optional callback function once the image has been loaded.

# Properties

A list of properties that are on every Two.Texture.

# RegularExpressions

A map of compatible DOM Elements categorized by media format.

# ImageRegistry

A canonical listing of image data used in a single session of Two.js.


This object is used to cache image data between different textures.

# getAbsoluteURL

Returns: String

  • The serialized absolute path.

Serializes a URL as an absolute path for canonical attribution in Two.ImageRegistry.

Argument Description

# loadHeadlessBuffer

Loads an image as a buffer in headless environments.

Argument Description
texture The Two.Texture to be loaded.
loaded The callback function to be triggered once the image is loaded.


  • This function uses node's fs.readFileSync to spoof the <img /> loading process in the browser.

# getTag

Returns: String

  • Returns the tag name of an image, video, or canvas node.

Retrieves the tag name of an image, video, or canvas node.

Argument Description
The image to infer the tag name from.

# getImage

Returns: HTMLImageElement

Convenience function to set Two.Texture.image properties with canonincal versions set in Two.Texture.ImageRegistry.

Argument Description
src The URL path of the image.

# Register

A collection of functions to register different types of textures. Used internally by a Two.Texture.

# load

Argument Description
texture The texture to load.
callback The function to be called once the texture is loaded.

# FlagOffset

Cached method to let renderers know offset has been updated on a Two.Texture.

# FlagScale

Cached method to let renderers know scale has been updated on a Two.Texture.

# MakeObservable

Argument Description
object The object to make observable.

Convenience function to apply observable qualities of a Two.Texture to any object. Handy if you'd like to extend or inherit the Two.Texture class on a custom class.

# renderer

Object access to store relevant renderer specific variables. Warning: manipulating this object can create unintended consequences.


With the Two.SvgRenderer you can access the underlying SVG element created via shape.renderer.elem.

# loaded

Shorthand value to determine if image has been loaded into the texture.

# repeat

CSS style declaration to tile Two.Path. Valid values include: 'no-repeat', 'repeat', 'repeat-x', 'repeat-y'.

# offset

A two-component vector describing any pixel offset of the texture when applied to a Two.Path.

# src

The URL path to the image data.


This property is ultimately serialized in a Two.Registry to cache retrieval.

# image

The corresponding DOM Element of the texture. Can be a <img />, <canvas />, or <video /> element. See Two.Texture.RegularExpressions for a full list of supported elements.


In headless environments this is a Canvas.Image object. See https://github.com/Automattic/node-canvas (opens new window) for more information on headless image objects.

# clone

Returns: Two.Texture

Create a new instance of Two.Texture with the same properties of the current texture.

# toObject

Returns: Object

Return a JSON compatible plain object that represents the texture.