razztyfication / vue-drawing-canvas

VueJS Component for drawing on canvas.

vue-drawing-canvas

VueJS Component for drawing on canvas.

Support for both Vue 3 and Vue 2 + Composition API

Demo

Vue 3

Vue 2

Deployed on a nuxt container which have access to terminal

Note: If you're using nuxt.js and receive error Object(...) is not a function please refer to this issue

Table of Contents

• Installation
• Usage
  • Props
    • Watermark Object
  • Methods
• Changelog
• License

Installation

Install using package manager:

npm install --save-dev vue-drawing-canvas

# or with Vue 2

npm install --save-dev vue-drawing-canvas @vue/composition-api

Then add it to your component files

<!-- MyComponent.vue -->

<template>
  <vue-drawing-canvas ref="VueCanvasDrawing" />
</template>

<script>
  import VueDrawingCanvas from "vue-drawing-canvas";

  export default {
    name: "MyComponent",
    components: {
      VueDrawingCanvas,
    },
  };
</script>

Usage

Props

Name	Type	Default Value	Description
canvasId	String	VueDrawingCanvas	Specifies your canvas id
width	String, Number	600	Specifies canvas width
height	String, Number	400	Specifies canvas height
image	String		Your v-model to get canvas output to an base64 image
strokeType	String	"dash"	Specifies stroke type to draw on canvas. Accepted value "dash", "line", "circle", "square", "triangle", "half_triangle"
fillShape	Boolean	false	Specifies if the shape must be filled with the current fill style
eraser	Boolean	false	Props to change state from drawing to erasing
color	String	"#000000"	Specifies the color, gradient, or pattern to use for the strokes
lineWidth	Number	5	Sets the thickness of line
lineCap	String	"round"	Determines the shape used to draw the end points of line. Accepted value "round", "square", "butt". Refer to this site for more information.
lineJoin	String	"miter"	determines the shape used to join two line segments where they meet. Accepted value "round", "miter", "square". Refer to this site for more information.
lock	Boolean	false	Lock canvas for drawing
backgroundColor	String	"#FFFFFF"	Set background color on your canvas
backgroundImage	String		Set background image on your canvas Be carefull for performance issue when using this props !!
initialImage	Array	[]	Draw strokes and shapes from canvas you've worked before. Demo
additionalImages	Array	[]	Accept Array of watermark Object to draw either text or insert multiple image on canvas Be carefull for performance issue when using this props !!
classes	Array, String, Object		Specifies your own classes to canvas
styles	Array, String, Object		Specifies your own styles to canvas
watermark	Object		Put watermark text/image on your image output (see details in the next section below)
saveAs	String	"png"	Specifies output type. This props accept either "png" or "jpeg"
outputWidth	Number	this.width	Specifies image output width, if undefined then canvas width will be used
outputHeight	Number	this.height	Specifies image output height, if undefined then canvas height will be used

Watermark Object

{
  // 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
  }
}

Methods

Method Name	Return Value	Description
getCoordinates(event)	{ x: 0, y: 0 }	Get x-axis and y-axis coordinates from current canvas
reset()		Reset current canvas to new state
undo()		Remove last drawing stroke on current canvas
redo()		Re-draw last removed stroke on current canvas
redraw()		Redraw all strokes on current canvas
isEmpty()	true or false	Get current canvas empty state
getAllStrokes()	Array of strokes and shapes	Get all strokes and shapes from canvas

Changelog

Read here

License

MIT