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");
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. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent