Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/razztyfication/vue-drawing-canvas
VueJS Component for drawing on canvas.
https://github.com/razztyfication/vue-drawing-canvas
canvas draw drawing signature vue vue2 vue3 vuejs
Last synced: about 17 hours ago
JSON representation
VueJS Component for drawing on canvas.
- Host: GitHub
- URL: https://github.com/razztyfication/vue-drawing-canvas
- Owner: razztyfication
- License: mit
- Created: 2021-07-31T05:08:31.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-26T16:34:10.000Z (over 1 year ago)
- Last Synced: 2024-09-21T13:50:38.514Z (4 days ago)
- Topics: canvas, draw, drawing, signature, vue, vue2, vue3, vuejs
- Language: TypeScript
- Homepage: https://github.com/razztyfication/vue-drawing-canvas
- Size: 377 KB
- Stars: 112
- Watchers: 1
- Forks: 22
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
vue-drawing-canvas
VueJS Component for drawing on canvas.
Support for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)
Demo
### Vue 3
[](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)
### Vue 2
> Deployed on a nuxt container which have access to terminal
[](https://codesandbox.io/s/vue-drawing-canvas-p4slb)
> Note:
> If you're using nuxt.js and receive error `Object(...) is not a function` please refer to this [issue](https://github.com/razztyfication/vue-drawing-canvas/issues/13)
Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Watermark Object](#watermark-object)
- [Methods](#methods)
- [Changelog](#changelog)
- [License](#license)
# Installation
Install using package manager:
```bash
npm install --save-dev vue-drawing-canvas
# or with Vue 2
npm install --save-dev vue-drawing-canvas @vue/composition-api
```
Then add it to your component files
```html
import VueDrawingCanvas from "vue-drawing-canvas";
export default {
name: "MyComponent",
components: {
VueDrawingCanvas,
},
};
```
# Usage
## Props
| Name | Type | Default Value | Description |
| ---------------- | :-------------------: | :----------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| canvasId | String | `VueDrawingCanvas` | Specifies your canvas id |
| width | String, Number | `600` | Specifies canvas width |
| height | String, Number | `400` | Specifies canvas height |
| image | String | | Your v-model to get canvas output to an base64 image |
| strokeType | String | `"dash"` | Specifies stroke type to draw on canvas.
Accepted value `"dash"`, `"line"`, `"circle"`, `"square"`, `"triangle"`, `"half_triangle"` |
| fillShape | Boolean | `false` | Specifies if the shape must be filled with the current fill style |
| eraser | Boolean | `false` | Props to change state from drawing to erasing |
| color | String | `"#000000"` | Specifies the color, gradient, or pattern to use for the strokes |
| lineWidth | Number | `5` | Sets the thickness of line |
| lineCap | String | `"round"` | Determines the shape used to draw the end points of line.
Accepted value `"round"`, `"square"`, `"butt"`.
Refer to [this site](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap) for more information. |
| lineJoin | String | `"miter"` | determines the shape used to join two line segments where they meet.
Accepted value `"round"`, `"miter"`, `"square"`.
Refer to [this site](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin) for more information. |
| lock | Boolean | `false` | Lock canvas for drawing |
| backgroundColor | String | `"#FFFFFF"` | Set background color on your canvas |
| backgroundImage | String | | Set background image on your canvas
**_Be carefull for performance issue when using this props !!_** |
| initialImage | Array | `[]` | Draw strokes and shapes from canvas you've worked before. [Demo](https://codesandbox.io/s/vue-drawing-canvas-107-rc1-dcoiy) |
| additionalImages | Array | `[]` | Accept Array of [watermark](#watermark-object) Object to draw either text or insert multiple image on canvas
**_Be carefull for performance issue when using this props !!_** |
| classes | Array, String, Object | | Specifies your own classes to canvas |
| styles | Array, String, Object | | Specifies your own styles to canvas |
| watermark | Object | | Put watermark text/image on your image output
(see details in the next section below) |
| saveAs | String | `"png"` | Specifies output type. This props accept either `"png"` or `"jpeg"` |
| outputWidth | Number | `this.width` | Specifies image output width, if `undefined` then canvas width will be used |
| outputHeight | Number | `this.height` | Specifies image output height, if `undefined` then canvas height will be used |
### Watermark Object
```js
{
// Specifies your watermark type. Type can be either "Text" or "Image"
//
// type: String
// required: true
// validator: (value) => { return ["Text", "Image"].includes(value) }
type: "Text",
// Specifies your watermark source
// If type is "Text" enter your watermark text here
// if type if "Image" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file
//
// type: String
// required: true
source: "Watermark",
// The x-axis coordinate of the point at which to begin drawing the watermark,
// in pixels
//
// type: Number
// required: true
x: 200,
// The y-axis coordinate of the point at which to begin drawing the watermark,
// in pixels
//
// type: Number
// required: true
y: 180,
// Specifies width and height for your watermark image
//
// type: Object
// required: false
imageStyle: {
// The width to draw the image in the canvas
//
// type: Number
// required: false
// default: () => this.width
width: 600,
// The height to draw the image in the canvas
//
// type: Number
// required: false
// default: () => this.height
height: 400
},
// Specifies text style for your watermark
//
// type: Object
// required: false
fontStyle: {
// The maximum number of pixels wide the text may be once rendered.
// If not specified, there is no limit to the width of the text.
//
// type: Number
// required: false
width: 200,
// Sets the height of text in pixels. Usually this value has same value with font
//
// type: Number
// required: false
// default: () => 20
lineHeight: 48,
// Specifies the color, gradient, or pattern to use for the text
//
// type: String
// required: false
// default: () => '#000000'
color: '#FF0000',
// Specifies the current text style to use when drawing text.
// font: '{fontWeight} {fontSize} {fontFamily}'
//
// type: String
// required: false
// default: () => '20px serif'
font: 'bold 48px serif',
// Specifies drawing type to use when drawing text.
//
// type: String
// required: false
// validator: (value) => { return ["fill", "stroke"].includes(value) }
// default: () => 'fill'
drawType: 'fill',
// Specifies the current text alignment used when drawing text
// The alignment is relative to the x value
//
// type: String
// required: false
// validator: (value) => { return ["left", "right", "center", "start", "end"].includes(value) }
// default: () => 'start'
textAlign: 'left',
// Specifies the current text baseline used when drawing text
//
// type: String
// required: false
// validator: (value) => { return ["top", "hanging", "middle", "alphabetic", "ideographic", "bottom"].includes(value) }
// default: () => 'alphabetic'
textBaseline: 'top',
// The rotation angle, clockwise in radians
//
// type: Number
// required: false
rotate: 45
}
}
```
## Methods
| Method Name | Return Value | Description |
| --------------------- | :-----------------------------: | ----------------------------------------------------- |
| getCoordinates(event) | `{ x: 0, y: 0 }` | Get x-axis and y-axis coordinates from current canvas |
| reset() | | Reset current canvas to new state |
| undo() | | Remove last drawing stroke on current canvas |
| redo() | | Re-draw last removed stroke on current canvas |
| redraw() | | Redraw all strokes on current canvas |
| isEmpty() | `true` or `false` | Get current canvas empty state |
| getAllStrokes() | _`Array of strokes and shapes`_ | Get all strokes and shapes from canvas |
# Changelog
[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)
# License
[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)