vue-draw-canvas

VueJS Component for drawing on canvas.

This component allows you to draw several shapes, change the stroke color, erase, clear, use a background image (and handle its crossorigin), and more... All props below in the dedicated section.

Support for both Vue 3 and Vue 2 + Composition API

Forked from razztyfication/vue-drawing-canvas package.

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 @thomas.fortin/vue-draw-canvas

# or with Vue 2

npm install --save-dev @thomas.fortin/vue-draw-canvas @vue/composition-api

Then add it to your component files

<!-- MyComponent.vue -->

<template>
  <vue-draw-canvas ref="VueCanvasDraw" />
</template>

<script>
  import VueDrawCanvas from "@thomas.fortin/vue-draw-canvas";

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

Usage

Props

Name	Type	Default Value	Description
canvasId	String	VueDrawCanvas	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 a base64 image.
strokeType	String	"dash"	Specifies stroke type to draw on canvas. Accepted values: "dash", "line", "circle", "rectangle", "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 values: "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 values: "round", "miter", "bevel". 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 !!
backgroundImageCors	String		Set the crossorigin attribute of the background image. Accepted values: "anonymous", "user-credentials". Refer to this site for more information.
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