HTML5 Canvas Drawing Component For Vue 3/2

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:

HTML5 Canvas Drawing Component

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

You Might Be Interested In:

Add Comment