Description:
A Vue 3/2 component that allows drawing on an HTML5 canvas using JavaScript. Text/image watermark is supported.
How to use it:
1. Import and register the drawing canvas component.
import VueDrawingCanvas from "vue-drawing-canvas";
export default {
components: {
VueDrawingCanvas,
},
// ...
}
2. Add the component to the template.
<template>
<vue-drawing-canvas
ref="VueCanvasDrawing"
/>
</template>
3. Available component props.
strokeType: {
type: String,
validator: (value: string): boolean => {
return ['dash', 'line', 'square', 'circle', 'triangle', 'half_triangle'].indexOf(value) !== -1
},
default: () => 'dash'
},
fillShape: {
type: Boolean,
default: () => false
},
width: {
type: [String, Number],
default: () => 600
},
height: {
type: [String, Number],
default: () => 400
},
image: {
type: String,
default: () => ''
},
eraser: {
type: Boolean,
default: () => false
},
color: {
type: String,
default: () => '#000000'
},
lineWidth: {
type: Number,
default: () => 5
},
lineCap: {
type: String,
validator: (value: string): boolean => {
return ['round', 'square', 'butt'].indexOf(value) !== -1
},
default: () => 'round'
},
lineJoin: {
type: String,
validator: (value: string): boolean => {
return ['miter', 'round', 'bevel'].indexOf(value) !== -1
},
default: () => 'miter'
},
lock: {
type: Boolean,
default: () => false
},
styles: {
type: [Array, String, Object],
},
classes: {
type: [Array, String, Object],
},
backgroundColor: {
type: String,
default: () => '#FFFFFF'
},
backgroundImage: {
type: String,
default: (): null | string => null
},
watermark: {
type: Object,
default: (): null | WatermarkData => null
},
saveAs: {
type: String,
validator: (value: string) => {
return ['jpeg', 'png'].indexOf(value) !== -1
},
default: () => 'png'
},
canvasId: {
type: String,
default: () => 'VueDrawingCanvas'
},
initialImage: {
type: Array,
default: (): any => []
},
additionalImages: {
type: Array,
default: (): any => []
},
outputWidth: {
type: Number
},
outputHeight: {
type: Number
}
4. API methods.
// Get x-axis and y-axis coordinates from current canvas getCoordinates(event) // Get all strokes getAllStrokes() // Reset reset() // Undo undo() // Redo redo() // Redraw redraw() // Check if is empty isEmpty()
Preview:
Changelog:
v1.0.14 (05/17/2022)
- Bug fix background color not working
v1.0.13 (05/13/2022)
- Bug fix missing line guide when background image exist
v1.0.12 (05/10/2022)
- BUG FIX: canvas break draw circle with no coordinates
v1.0.11 (04/27/2022)
- Added new prop outputWidth and outputHeight
- Bug fixes
v1.0.10 (04/17/2022)
- Eraser no longer erase background image
- Added new prop lineCap and lineJoin
- Added new value “line” on strokeStyle to draw straight line
v1.0.9 (02/12/2022)
- BUG FIX redraw function with wrong stroke type
- BUG FIX typescript type declaration not compatible with noImplicitAny
- Added new prop additionalImages will accept Array of watermark Object to draw either text or insert multiple image on canvas
v1.0.8 (01/14/2022)
- BUG FIX not working on drawing tablet and stylus
v1.0.7 (12/22/2021)
- Added initialImage with getAllStrokes method
Download Details:
Author: razztyfication
Live Demo: https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz
Download Link: https://github.com/razztyfication/vue-drawing-canvas/archive/refs/heads/master.zip
Official Website: https://github.com/razztyfication/vue-drawing-canvas
Install & Download:
# VUE 3
$ npm i vue-drawing-canvas
# VUE 2
$ npm i vue-drawing-canvas @vue/composition-api