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) => {
    return ['dash', '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
},
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
},
watermark: {
  // 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
  }
},
saveAs: {
  type: String,
  validator: (value: string) => {
    return ['jpeg', 'png'].indexOf(value) !== -1
  },
  default: () => 'png'
},
canvasId: {
  type: String,
  default: () => 'VueDrawingCanvas'
}
initialImage: {
  type: Array,
  default: () => []
}

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.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