HTML5 Canvas Drawing Component For Vue 3/2

Install & Download:

# VUE 3
$ npm i vue-drawing-canvas
# VUE 2
$ npm i vue-drawing-canvas @vue/composition-api

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)