@thomas.fortin/vue-draw-canvas v1.1.6

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

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

Changelog

Read here

License

MIT