VueJS Component - drawable 'object-based' canvas.
npm install vue-drawable-canvasVueJS Component - drawable 'object-based' canvas
Vue3.
`` yarn add vue-drawable-canvas `
To test - clone repo and run:
` yarn serve `
To use (See the playground folder for a working demo):
`
/>
``
The component have these modes of usage:
| String |
| :-: |
| draw |
| erase |
| move |
The component can draw these shapes:
| String |
| :-: |
| pencil |
| circle |
| rectangle |
| triangle |
| text |
| background |
The given mode and shape are set by props.
Canvas shapes are erased or moved by selecting the appropriate mode then clicking and/or dragging the shape.
| Name | Type | Default value | Description |
| :-: | :-: | :-: | :-: |
| width | Number | 800 | The canvas width |
| height | Number | 600 | The canvas height |
| font | String | 3rem Arial | The font size and type |
| lineWidth | Number | 5 | The width of the stroke |
| strokeStyle | String | #000000 | The color of the stroke |
| fillStyle | String | transparent | The color of the fill. Note: also sets the text color |
| backgroundColor | String | transparent | The background color |
| backgroundImage | String | '' | The background image |
| stretchBackgroundImage | Boolean | false | Stretces the background image to fit the canvas |
| shape | string | string | The shape to be drawn |
| mode | string | string | The canvas mode |
| devicePixelRatio | Boolean | true | Adjust the canavs resolution based on the devicePixelRatio |
| Event | Data | Description |
| :-: | :-: | :-: |
| mousedown | MouseEvent, Coordinate | Emits the mouse event and the coordinate relative to the canvas where the mouse was clicked |
| target | Coordinate | If mouse click or drag is above an object on the canvas the coordinates relative to the canvas is emitted |
| Method name | Parameters | Return value | Description |
| :-: | :-: | :-: | :-: |
| clear | - | void | Clear the canvas and the undo/redo history |
| undo | - | void | - |
| redo | - |void | - |
| save | scale | Number | returns blob |
| drawText | (coordinate, text) | void | Adds text to the canvas. The coordinate is the top left coordinate where the text will be placed. (Text is rendered with textBaseline 'top')|