VueJS Component for drawing on canvas.

Support for both Vue 3 and Vue 2 + Composition API

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

• 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 canvasBe 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 canvasBe 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