SimpleCanvas

Simple HTML5 Canvas wrapper written with typescript.

This is a simple wrapper around HTML5 canvas. It simplifies using canvas.

Example:

var canvas = new SimpleCanvas("my-canvas");
canvas.drawLine(20, 20, 150, 200, "red");

API

constructor

var canvas = new SimpleCanvas("mycanvas"); Creates a new SimpleCanvas.

Parameters:

| Name | Type | Description | Default value |---|---|---|--- container | string or HTMLElement | Either ID of the container element or ID of the canvas or container element itself or the canvas element itself |

if the 'container' argument is not a canvas (or ID of a canvas element), then a canvas will be created inside the container.

• drawLine(x1, y1, x2, y2, color, lineWidth, alpha)

Draws a line from (x1,y1) to (x2,y2).

Parameters:

| Name | Type | Description | Default value |---|---|---|--- x1, y1 | number | Starting point coordinates | x2, y2 | number | End point coordinates | color | string | Drawing color | "black" lineWidth | number | Line width | 1 alpha | floating point number | Alpha. 0 means transparent. 1 means opaque. | 1

• drawRect(x, y, width, height, strokeColor, lineWidth, fillColor, alpha)

Draws a rectangle. Optionally filled with a color.

Parameters:

| Name | Type | Description | Default value |---|---|---|--- x, y | number | Top-left corner coordinates | width, height | number | Size of the rectangle | strokeColor | string | Lines color | "black" lineWidth | number | Line width | 1 fillColor | string | Fill color | '' (not filled) alpha | floating point number | Alpha. 0 means transparent. 1 means opaque.

• drawCircle(x, y, radius, strokeColor, lineWidth, fillColor, alpha)

Draws a circle. Optionally filled with a color.

Parameters:

| Name | Type | Description | Default value |---|---|---|--- x, y | number | Center coordinates | radius | number | Circle radius | strokeColor | string | Line color | "black" lineWidth | number | Line width | 1 fillColor | string | Fill color | '' (not filled) alpha | floating point number | Alpha. 0 means transparent. 1 means opaque.

• drawImage(src, x, y, width, height, alpha)

Draws an image with specified URL on the canvas.

Parameters:

| Name | Type | Description | Default value |---|---|---|--- src | string | URL of the image | x, y | number | Top-left corner coordinates | width, height | number | Size of the image | alpha | floating point number | Alpha. 0 means transparent. 1 means opaque.