Canvas

The Canvas APIs provide interfaces for creating canvas objects, drawing graphics, and rendering content on screen. Use createCanvas to obtain a canvas, then call getContext to retrieve a 2D or WebGL rendering context for drawing.

TTMinis.game.createCanvas()

Creates a canvas object. The first call creates the canvas displayed on the screen. Subsequent calls create off-screen canvases.

Returns

Canvas object:

Field	Type	Description
`width`	`int32`	The width of the canvas
`height`	`int32`	The height of the canvas
`getContext`	`function`	Gets the rendering context of the canvas object
`toDataURL`	`function`	Returns the drawing content on the canvas as a `string`. When the open data domain is enabled, all canvases in the main domain cannot call this interface.

Example

const canvas = TTMinis.game.createCanvas();
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);

TTMinis.game.createImage()

Creates an image object.

Returns

Image object:

Field	Type	Description
`src`	`string`	The image URL, base64 content, or ArrayBuffer data
`width`	`int32`	The actual width of the image
`height`	`int32`	The actual height of the image
`addEventListener`	`function`	Adds an event listener
`removeEventListener`	`function`	Removes an event listener

Example

const img = TTMinis.game.createImage();
img.addEventListener('load', () => {
  console.log('Image loaded', img.width, img.height);
});
img.src = 'https://example.com/image.png';

Canvas.getContext(contextType)

Gets the rendering context of the canvas object.

Parameters

Field	Type	Description	Required
`contextType`	`string`	The context type. Valid values are `2d` and `webgl`. When the parameter is `2d`, the returned `CanvasRenderingContext2D` implements most properties and methods defined in the HTML Canvas 2D Context specification. When the parameter is `webgl`, the returned `WebGLRenderingContext` implements all properties, methods, and constants defined in the WebGL 1.0 specification.	Yes

Returns

The context object of the canvas. The type depends on the contextType parameter (CanvasRenderingContext2D for 2d, WebGLRenderingContext for webgl).

Example

const canvas = TTMinis.game.createCanvas();
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 50, 50);

Canvas.toDataURL()

Returns the drawing content on the canvas as a data URI string.

Returns

string - A data URI string of the canvas content.

Example

Canvas

#TTMinis.game.createCanvas()

#TTMinis.game.createImage()

#Canvas.getContext(contextType)

#Canvas.toDataURL()

TTMinis.game.createCanvas()

TTMinis.game.createImage()

Canvas.getContext(contextType)

Canvas.toDataURL()