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