{"_id":"vue-drawing-canvas","_rev":"31-56cc16735fd3c1854ac82a2e0addf41c","name":"vue-drawing-canvas","dist-tags":{"latest":"1.0.14","betaver":"1.0.13-rc.1","beta":"1.0.4-beta.1","alpha":"1.0.15-alpha.1"},"versions":{"1.0.0":{"name":"vue-drawing-canvas","version":"1.0.0","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.ssr.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.min.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@babel/preset-typescript":"^7.14.5","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.13","@vue/cli-plugin-typescript":"^4.5.13","@vue/cli-service":"^4.5.13","@vue/compiler-sfc":"^3.0.11","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.2.10","rimraf":"^3.0.2","rollup":"^2.52.8","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.12","typescript":"^4.0.3","vue":"^3.0.5","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"gitHead":"18044fa72ae59f6d9d1a7bd9ed69da317f4d01a0","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.0","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-1P49SqNO5rWiZMZPOMD0Bm0Ck7SY8FUEYGfoNjC3AChx9kHQe3/lZUaxvjbYQJtP9bXK6yu+3xceFvUogFH20g==","shasum":"257bf17748b83a76e7d2fdb980caa1a2b6745cd1","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.0.tgz","fileCount":7,"unpackedSize":46191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBNt4CRA9TVsSAnZWagAAqv0P/3l7lTM9kiNGXKbmNIZM\npwJvLiY2dnxbK9QLq6yjG/+QTW+LNi1dwkbtZXSqHOSj7VTxSFyV4WIq81dG\n6BXjDpdsjiiik0wS4TYwxjTiBxAWXixiEKR6a1R279YRALjMrjHn2PKS6Qts\nbyH3ICBJSdBc829pLHS0sayPfzpCWtie0B1OnfN4gUTo8SSNwqmjbq5diyP/\nPnEdhlh0spuSY8yzmCJ3vXvg132vvhf4r00msm+evt/2J+79nvDmZIoH7981\ni3qUbJnaN2xvrZmrdxIHR6+ob3bYLud0gzKiXQR/skBOUC6Hf1Tj7ZP+R3GJ\n5F5yFPBH1gmO553N6tzL1+mXXfVb89QH2ux+YwWgsYVKJr/wFkaTUVcCxdrn\nGZ0BQy4tS6n5TRYeIKEmLiIzI1OQqLofo6OTPGdTp2URlRfDESS1SwyBrVjU\n8I/Qr9SE2lKVJyCVXVhNpZ+piyu/C0p+FAaJQJ9qE5w4qn4JzBQXoO0BmcsU\njjZcrdW+wgYr1+TJY7xKHg0QXgD8qLGfmu5HmJ80jMDbFOqIlfxD0RyzhhoN\ntWV/Tqt9O5SnviyWI0Y/0WOySudZfGmzjmlWuFEWyx9XwUs90DVgVlU5ZH4M\nhLTPDGHljocG5hcSZnyMQO4vGxX43Bi1FF4Pq4QRHw22ZBGl9fxJleI0WihC\nuu5k\r\n=G9MP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDUEMTGfX4DJ/nP/eg15cBE1F0WdP60apeVwXET3jjIyAiBsyJlsdSysKjxZlF7czEpmCgsLYb1DT0ghwGxvM/06ig=="}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.0_1627708280395_0.2386405764829993"},"_hasShrinkwrap":false},"1.0.1":{"name":"vue-drawing-canvas","version":"1.0.1","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.ssr.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.min.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@babel/preset-typescript":"^7.14.5","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.13","@vue/cli-plugin-typescript":"^4.5.13","@vue/cli-service":"^4.5.13","@vue/compiler-sfc":"^3.0.11","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.2.10","rimraf":"^3.0.2","rollup":"^2.52.8","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.12","typescript":"^4.0.3","vue":"^3.0.5","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"gitHead":"5907e2a3eec439bce6d0a092185c8ec5ed18cd7e","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-MvWBOW4ogsVPCS0zxfmzAGMALBw0NbWHWFnce6GELb4R10E3CcV4CgGI8wwIv/fDyFZddCDB0cVB4E+8IMrDKg==","shasum":"3d5def781a81293365fb8284b1b0c966154dac60","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.1.tgz","fileCount":8,"unpackedSize":61982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCXo5CRA9TVsSAnZWagAAXngP/iJTQjp40Jq1LkeuKuj3\n77qSWFffAb45CEoMZfx2oBEQbgwi/1RKjflP5ga6+bMSKCdjJzo/BkYDKHJP\nqdI/Qts6PEjKAVfVzwGXbZA3FO4sxbz90s3/a7QJ//t467emd0/F3p3u4nRE\nVqU5Fa8G2Qi6ha+cHURbloMYPlyXOa1hmuYw8qiEVuKtYJPgNAkYWmO5I1eL\nDT3aWCBHOO5ZDrb2wRwU4Khk8ZQgXPIegozXz4oyrv1Z+Oqj8ObcAKYpuwct\nyJyy/tAZRFQIEHzJW+5ys95BEtLjo7MYuwOUal1iuJk/gue4xB8bass8WAfr\nDmKLnVFp9ys6X/bkTnYvxV/bs8kR/omTMRK0/agXlrgmCaEVmzAoHL1oaztv\n1cskCN4itENFzezqQCDlg17LiVXDdR/ynYlQdZIUD/mp4FxnvzXCTJrHyCS/\n7HOzNUrK32E41GsAyO5U/TgiOXoY27KWUkIaEZrcIQdeAehv751IC5t11dzd\nF5RFcGzRUoP6w6Z8qC8yC21VROo28W01nl/Nk9wd4xUxT5iWQTxPm8TPahv+\ngqBGhJRp+6zRTFSKJxRPiJbm71OztPRQJPAdpV5Xg4wfyGQaG3TzMmpIungO\nXUl5qontVmy+8cMfxXbyQQxpXakRdJmuNmy7y1ARptYFUIg+ZPoed56JZmat\n7Bae\r\n=qk23\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwThZ6IyCyxZaGHrg3aj+Ml+yeCy8Q8RNJq+t8ipYEBAiEApaw4nR4bFxgG/bbYsr2D4sjHP0dDNvG4GPpmcN/RqUI="}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.1_1628011065078_0.18119043428681647"},"_hasShrinkwrap":false},"1.0.2-betaver.1":{"name":"vue-drawing-canvas","version":"1.0.2-betaver.1","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.ssr.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.min.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@babel/preset-typescript":"^7.14.5","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.13","@vue/cli-plugin-typescript":"^4.5.13","@vue/cli-service":"^4.5.13","@vue/compiler-sfc":"^3.0.11","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.2.10","rimraf":"^3.0.2","rollup":"^2.52.8","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.12","typescript":"^4.0.3","vue":"^3.0.5","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"readme":"vue-drawing-canvas
\r\n\r\nVueJS Component for drawing on canvas.\r\n\r\nSupport for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)\r\n\r\n
\r\n\r\nDemo
\r\n\r\n### Vue 3\r\n\r\n[](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)\r\n\r\n### Vue 2\r\n\r\n> Deployed on a nuxt container which have access to terminal\r\n\r\n
\r\n\r\n[](https://codesandbox.io/s/vue-drawing-canvas-p4slb)\r\n\r\n
\r\n\r\nTable of Contents
\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Props](#props)\r\n - [Watermark Object](#watermark-object)\r\n - [Methods](#methods)\r\n- [Changelog](#changelog)\r\n- [License](#license)\r\n\r\n
\r\n\r\n# Installation\r\nInstall using package manager:\r\n```bash\r\nnpm install --save-dev vue-drawing-canvas\r\n\r\n# or with Vue 2\r\n\r\nnpm install --save-dev vue-drawing-canvas @vue/composition-api\r\n```\r\n\r\nThen add it to your component files\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n
\r\n\r\n# Usage\r\n\r\n## Props\r\n\r\n
\r\n\r\n| Name | Type | Default Value | Description |\r\n|-----------------|:---------------------:|:-------------:|----------------------------------------------------------------------------------------------------------------------------------|\r\n| width | String, Number | `600` | Specifies canvas width |\r\n| height | String, Number | `400` | Specifies canvas height |\r\n| image | String | | Your v-model to get canvas output to an base64 image |\r\n| strokeType | String | `\"dash\"` | Specifies stroke type to draw on canvas.
Accepted value `\"dash\"`, `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"half_triangle\"` |\r\n| fillShape | Boolean | `false` | Specifies if the shape must be filled with the current fill style |\r\n| eraser | Boolean | `false` | Props to change state from drawing to erasing |\r\n| color | String | `\"#000000\"` | Specifies the color, gradient, or pattern to use for the strokes |\r\n| lineWidth | Number | `5` | Sets the thickness of line |\r\n| lock | Boolean | `false` | Lock canvas for drawing |\r\n| backgroundColor | String | `\"#FFFFFF\"` | Set background color on your canvas |\r\n| backgroundImage | String | | Set background image on your canvas
**_Be carefull for performance issue when using this props !!_** |\r\n| classes | Array, String, Object | | Specifies your own classes to canvas |\r\n| styles | Array, String, Object | | Specifies your own styles to canvas |\r\n| watermark | Object | | Put watermark text/image on your image output
(see details in the next section below) |\r\n| saveAs | String | `\"png\"` | Specifies output type. This props accept either `\"png\"` or `\"jpeg\"` |\r\n\r\n
\r\n\r\n### Watermark Object\r\n\r\n
\r\n\r\n```js\r\n{\r\n // Specifies your watermark type. Type can be either \"Text\" or \"Image\"\r\n // \r\n // type: String\r\n // required: true\r\n // validator: (value) => { return [\"Text\", \"Image\"].includes(value) }\r\n type: \"Text\",\r\n // Specifies your watermark source\r\n // If type is \"Text\" enter your watermark text here\r\n // if type if \"Image\" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file\r\n // \r\n // type: String\r\n // required: true\r\n source: \"Watermark\",\r\n // The x-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n x: 200,\r\n // The y-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n y: 180,\r\n // Specifies width and height for your watermark image\r\n // \r\n // type: Object\r\n // required: false\r\n imageStyle: {\r\n // The width to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.width\r\n width: 600,\r\n // The height to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.height\r\n height: 400\r\n },\r\n // Specifies text style for your watermark\r\n // \r\n // type: Object\r\n // required: false\r\n fontStyle: {\r\n // The maximum number of pixels wide the text may be once rendered.\r\n // If not specified, there is no limit to the width of the text. \r\n // \r\n // type: Number\r\n // required: false\r\n width: 200,\r\n // Sets the height of text in pixels. Usually this value has same value with font\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => 20\r\n lineHeight: 48,\r\n // Specifies the color, gradient, or pattern to use for the text\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '#000000'\r\n color: '#FF0000',\r\n // Specifies the current text style to use when drawing text.\r\n // font: '{fontWeight} {fontSize} {fontFamily}'\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '20px serif'\r\n font: 'bold 48px serif',\r\n // Specifies drawing type to use when drawing text.\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"fill\", \"stroke\"].includes(value) }\r\n // default: () => 'fill'\r\n drawType: 'fill',\r\n // Specifies the current text alignment used when drawing text\r\n // The alignment is relative to the x value\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"left\", \"right\", \"center\", \"start\", \"end\"].includes(value) }\r\n // default: () => 'start'\r\n textAlign: 'left',\r\n // Specifies the current text baseline used when drawing text\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", \"bottom\"].includes(value) }\r\n // default: () => 'alphabetic'\r\n textBaseline: 'top',\r\n // The rotation angle, clockwise in radians\r\n // \r\n // type: Number\r\n // required: false\r\n rotate: 45\r\n }\r\n}\r\n```\r\n\r\n
\r\n\r\n## Methods\r\n\r\n
\r\n\r\n| Method Name | Return Value | Description |\r\n|-----------------------|:-----------------:|-------------------------------------------------------|\r\n| getCoordinates(event) | `{ x: 0, y: 0 }` | Get x-axis and y-axis coordinates from current canvas |\r\n| reset() | | Reset current canvas to new state |\r\n| undo() | | Remove last drawing stroke on current canvas |\r\n| redo() | | Re-draw last removed stroke on current canvas |\r\n| redraw() | | Redraw all strokes on current canvas |\r\n| isEmpty() | `true` or `false` | Get current canvas empty state |\r\n\r\n
\r\n\r\n# Changelog\r\n[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)\r\n\r\n
\r\n\r\n# License\r\n[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)\r\n","readmeFilename":"README.md","gitHead":"5907e2a3eec439bce6d0a092185c8ec5ed18cd7e","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.2-betaver.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-h6jggW0MdHjzBKxPUrnMM1c00VlPOny9Lww+RwSoxwkmOLKRtYT8jYnGoENzJadJY9MZN272RA+DE8VUbIvQvw==","shasum":"c068d28ac65a411fabf9f116f70a2dada9fae871","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.2-betaver.1.tgz","fileCount":8,"unpackedSize":64000,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcB6fZ6HfeiY1Zp1dH6f6psq/labyWPPm9vNvhLAYUAwIgcaMaRocuNUo082B5hfnmDawt2iPlBBZ/xFCfFcIdlMY="}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.2-betaver.1_1633409975868_0.26466365731300234"},"_hasShrinkwrap":false},"1.0.2":{"name":"vue-drawing-canvas","version":"1.0.2","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.ssr.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.min.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@babel/preset-typescript":"^7.14.5","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.13","@vue/cli-plugin-typescript":"^4.5.13","@vue/cli-service":"^4.5.13","@vue/compiler-sfc":"^3.0.11","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.2.10","rimraf":"^3.0.2","rollup":"^2.52.8","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.12","typescript":"^4.0.3","vue":"^3.0.5","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"gitHead":"505924be56e73be7390b01846ef2fa314c7ae480","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-FSqgVS3gIUXXpFL1rdYmmulWim+RdP7pp5AZL4nRzxMYBOEffLoolrXA2OP/+mqiDrktSDoGWrPc4odw6PIM7Q==","shasum":"069a413354ff8e082b602c3419531f2ada9206fe","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.2.tgz","fileCount":8,"unpackedSize":64001,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE0OQdCoClpx/HgCupqM/2q9qgScIaERlujzwYLH3+kXAiBtCMFRqaw9msaAGm0SHytnbfJaa1wN2FhqY8ZZoNypBQ=="}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.2_1633410831220_0.891195094537472"},"_hasShrinkwrap":false},"1.0.3-betaver.1":{"name":"vue-drawing-canvas","version":"1.0.3-betaver.1","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.ssr.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.min.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@babel/preset-typescript":"^7.14.5","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.13","@vue/cli-plugin-typescript":"^4.5.13","@vue/cli-service":"^4.5.13","@vue/compiler-sfc":"^3.0.11","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.2.10","rimraf":"^3.0.2","rollup":"^2.52.8","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.12","typescript":"^4.0.3","vue":"^3.0.5","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"readme":"vue-drawing-canvas
\r\n\r\nVueJS Component for drawing on canvas.\r\n\r\nSupport for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)\r\n\r\n
\r\n\r\nDemo
\r\n\r\n### Vue 3\r\n\r\n[](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)\r\n\r\n### Vue 2\r\n\r\n> Deployed on a nuxt container which have access to terminal\r\n\r\n
\r\n\r\n[](https://codesandbox.io/s/vue-drawing-canvas-p4slb)\r\n\r\n
\r\n\r\nTable of Contents
\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Props](#props)\r\n - [Watermark Object](#watermark-object)\r\n - [Methods](#methods)\r\n- [Changelog](#changelog)\r\n- [License](#license)\r\n\r\n
\r\n\r\n# Installation\r\nInstall using package manager:\r\n```bash\r\nnpm install --save-dev vue-drawing-canvas\r\n\r\n# or with Vue 2\r\n\r\nnpm install --save-dev vue-drawing-canvas @vue/composition-api\r\n```\r\n\r\nThen add it to your component files\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n
\r\n\r\n# Usage\r\n\r\n## Props\r\n\r\n
\r\n\r\n| Name | Type | Default Value | Description |\r\n|-----------------|:---------------------:|:-------------:|----------------------------------------------------------------------------------------------------------------------------------|\r\n| width | String, Number | `600` | Specifies canvas width |\r\n| height | String, Number | `400` | Specifies canvas height |\r\n| image | String | | Your v-model to get canvas output to an base64 image |\r\n| strokeType | String | `\"dash\"` | Specifies stroke type to draw on canvas.
Accepted value `\"dash\"`, `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"half_triangle\"` |\r\n| fillShape | Boolean | `false` | Specifies if the shape must be filled with the current fill style |\r\n| eraser | Boolean | `false` | Props to change state from drawing to erasing |\r\n| color | String | `\"#000000\"` | Specifies the color, gradient, or pattern to use for the strokes |\r\n| lineWidth | Number | `5` | Sets the thickness of line |\r\n| lock | Boolean | `false` | Lock canvas for drawing |\r\n| backgroundColor | String | `\"#FFFFFF\"` | Set background color on your canvas |\r\n| backgroundImage | String | | Set background image on your canvas
**_Be carefull for performance issue when using this props !!_** |\r\n| classes | Array, String, Object | | Specifies your own classes to canvas |\r\n| styles | Array, String, Object | | Specifies your own styles to canvas |\r\n| watermark | Object | | Put watermark text/image on your image output
(see details in the next section below) |\r\n| saveAs | String | `\"png\"` | Specifies output type. This props accept either `\"png\"` or `\"jpeg\"` |\r\n\r\n
\r\n\r\n### Watermark Object\r\n\r\n
\r\n\r\n```js\r\n{\r\n // Specifies your watermark type. Type can be either \"Text\" or \"Image\"\r\n // \r\n // type: String\r\n // required: true\r\n // validator: (value) => { return [\"Text\", \"Image\"].includes(value) }\r\n type: \"Text\",\r\n // Specifies your watermark source\r\n // If type is \"Text\" enter your watermark text here\r\n // if type if \"Image\" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file\r\n // \r\n // type: String\r\n // required: true\r\n source: \"Watermark\",\r\n // The x-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n x: 200,\r\n // The y-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n y: 180,\r\n // Specifies width and height for your watermark image\r\n // \r\n // type: Object\r\n // required: false\r\n imageStyle: {\r\n // The width to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.width\r\n width: 600,\r\n // The height to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.height\r\n height: 400\r\n },\r\n // Specifies text style for your watermark\r\n // \r\n // type: Object\r\n // required: false\r\n fontStyle: {\r\n // The maximum number of pixels wide the text may be once rendered.\r\n // If not specified, there is no limit to the width of the text. \r\n // \r\n // type: Number\r\n // required: false\r\n width: 200,\r\n // Sets the height of text in pixels. Usually this value has same value with font\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => 20\r\n lineHeight: 48,\r\n // Specifies the color, gradient, or pattern to use for the text\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '#000000'\r\n color: '#FF0000',\r\n // Specifies the current text style to use when drawing text.\r\n // font: '{fontWeight} {fontSize} {fontFamily}'\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '20px serif'\r\n font: 'bold 48px serif',\r\n // Specifies drawing type to use when drawing text.\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"fill\", \"stroke\"].includes(value) }\r\n // default: () => 'fill'\r\n drawType: 'fill',\r\n // Specifies the current text alignment used when drawing text\r\n // The alignment is relative to the x value\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"left\", \"right\", \"center\", \"start\", \"end\"].includes(value) }\r\n // default: () => 'start'\r\n textAlign: 'left',\r\n // Specifies the current text baseline used when drawing text\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", \"bottom\"].includes(value) }\r\n // default: () => 'alphabetic'\r\n textBaseline: 'top',\r\n // The rotation angle, clockwise in radians\r\n // \r\n // type: Number\r\n // required: false\r\n rotate: 45\r\n }\r\n}\r\n```\r\n\r\n
\r\n\r\n## Methods\r\n\r\n
\r\n\r\n| Method Name | Return Value | Description |\r\n|-----------------------|:-----------------:|-------------------------------------------------------|\r\n| getCoordinates(event) | `{ x: 0, y: 0 }` | Get x-axis and y-axis coordinates from current canvas |\r\n| reset() | | Reset current canvas to new state |\r\n| undo() | | Remove last drawing stroke on current canvas |\r\n| redo() | | Re-draw last removed stroke on current canvas |\r\n| redraw() | | Redraw all strokes on current canvas |\r\n| isEmpty() | `true` or `false` | Get current canvas empty state |\r\n\r\n
\r\n\r\n# Changelog\r\n[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)\r\n\r\n
\r\n\r\n# License\r\n[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)\r\n","readmeFilename":"README.md","gitHead":"e413a709618aec402b4c4719af74ebf0a58e0883","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.3-betaver.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-rIt15sov9lZV2a2o3I6MX8q74Kajr1T4sQy3QPSG7Y3VopEJKOPCl69VXY5o48HHmIcuVYpNgLhNNV/Itlaqnw==","shasum":"8d3a0e97ee8ed26bfc37427771d22ae0353e47bb","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.3-betaver.1.tgz","fileCount":8,"unpackedSize":66948,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHjzGCupTZEnL5QzooE6wW4NYCpAgaOWzGjBhzVTQGTAIhAIgpSOS5q4LguVyxfL3J07HwATVF2Sry8hp2Up3JcSIT"}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.3-betaver.1_1633516035826_0.907199041638892"},"_hasShrinkwrap":false},"1.0.3":{"name":"vue-drawing-canvas","version":"1.0.3","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.ssr.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.min.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@babel/preset-typescript":"^7.14.5","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.13","@vue/cli-plugin-typescript":"^4.5.13","@vue/cli-service":"^4.5.13","@vue/compiler-sfc":"^3.0.11","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.2.10","rimraf":"^3.0.2","rollup":"^2.52.8","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.12","typescript":"^4.0.3","vue":"^3.0.5","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"gitHead":"e413a709618aec402b4c4719af74ebf0a58e0883","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-RAqlWtmmmgtt7NoAWpjjSWbmUY9EexPICKInGTYrEf0Vg4Q3y2z1Lio9crFL1ljmJs3msy2DQ0sbW77TRHWvtw==","shasum":"7e0300373515db88fbeb975e91ddad22c0173f95","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.3.tgz","fileCount":8,"unpackedSize":67123,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDs0D0DBYgxGihTavFvsY+sX4DBXDoY28cfwT3PTON7qgIhALZfCi+s1YOMcY8S8MRhtbcBJ4h7y9zSuQiiYGIJ8TVc"}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.3_1633516643846_0.5246650338667995"},"_hasShrinkwrap":false},"1.0.4-beta.1":{"name":"vue-drawing-canvas","version":"1.0.4-beta.1","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.ssr.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.min.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@babel/preset-typescript":"^7.14.5","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.13","@vue/cli-plugin-typescript":"^4.5.13","@vue/cli-service":"^4.5.13","@vue/compiler-sfc":"^3.0.11","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.2.10","rimraf":"^3.0.2","rollup":"^2.52.8","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.12","typescript":"^4.0.3","vue":"^3.0.5","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"readme":"vue-drawing-canvas
\r\n\r\nVueJS Component for drawing on canvas.\r\n\r\nSupport for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)\r\n\r\n
\r\n\r\nDemo
\r\n\r\n### Vue 3\r\n\r\n[](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)\r\n\r\n### Vue 2\r\n\r\n> Deployed on a nuxt container which have access to terminal\r\n\r\n
\r\n\r\n[](https://codesandbox.io/s/vue-drawing-canvas-p4slb)\r\n\r\n
\r\n\r\nTable of Contents
\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Props](#props)\r\n - [Watermark Object](#watermark-object)\r\n - [Methods](#methods)\r\n- [Changelog](#changelog)\r\n- [License](#license)\r\n\r\n
\r\n\r\n# Installation\r\nInstall using package manager:\r\n```bash\r\nnpm install --save-dev vue-drawing-canvas\r\n\r\n# or with Vue 2\r\n\r\nnpm install --save-dev vue-drawing-canvas @vue/composition-api\r\n```\r\n\r\nThen add it to your component files\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n
\r\n\r\n# Usage\r\n\r\n## Props\r\n\r\n
\r\n\r\n| Name | Type | Default Value | Description |\r\n|-----------------|:---------------------:|:-------------:|----------------------------------------------------------------------------------------------------------------------------------|\r\n| width | String, Number | `600` | Specifies canvas width |\r\n| height | String, Number | `400` | Specifies canvas height |\r\n| image | String | | Your v-model to get canvas output to an base64 image |\r\n| strokeType | String | `\"dash\"` | Specifies stroke type to draw on canvas.
Accepted value `\"dash\"`, `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"half_triangle\"` |\r\n| fillShape | Boolean | `false` | Specifies if the shape must be filled with the current fill style |\r\n| eraser | Boolean | `false` | Props to change state from drawing to erasing |\r\n| color | String | `\"#000000\"` | Specifies the color, gradient, or pattern to use for the strokes |\r\n| lineWidth | Number | `5` | Sets the thickness of line |\r\n| lock | Boolean | `false` | Lock canvas for drawing |\r\n| backgroundColor | String | `\"#FFFFFF\"` | Set background color on your canvas |\r\n| backgroundImage | String | | Set background image on your canvas
**_Be carefull for performance issue when using this props !!_** |\r\n| classes | Array, String, Object | | Specifies your own classes to canvas |\r\n| styles | Array, String, Object | | Specifies your own styles to canvas |\r\n| watermark | Object | | Put watermark text/image on your image output
(see details in the next section below) |\r\n| saveAs | String | `\"png\"` | Specifies output type. This props accept either `\"png\"` or `\"jpeg\"` |\r\n\r\n
\r\n\r\n### Watermark Object\r\n\r\n
\r\n\r\n```js\r\n{\r\n // Specifies your watermark type. Type can be either \"Text\" or \"Image\"\r\n // \r\n // type: String\r\n // required: true\r\n // validator: (value) => { return [\"Text\", \"Image\"].includes(value) }\r\n type: \"Text\",\r\n // Specifies your watermark source\r\n // If type is \"Text\" enter your watermark text here\r\n // if type if \"Image\" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file\r\n // \r\n // type: String\r\n // required: true\r\n source: \"Watermark\",\r\n // The x-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n x: 200,\r\n // The y-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n y: 180,\r\n // Specifies width and height for your watermark image\r\n // \r\n // type: Object\r\n // required: false\r\n imageStyle: {\r\n // The width to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.width\r\n width: 600,\r\n // The height to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.height\r\n height: 400\r\n },\r\n // Specifies text style for your watermark\r\n // \r\n // type: Object\r\n // required: false\r\n fontStyle: {\r\n // The maximum number of pixels wide the text may be once rendered.\r\n // If not specified, there is no limit to the width of the text. \r\n // \r\n // type: Number\r\n // required: false\r\n width: 200,\r\n // Sets the height of text in pixels. Usually this value has same value with font\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => 20\r\n lineHeight: 48,\r\n // Specifies the color, gradient, or pattern to use for the text\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '#000000'\r\n color: '#FF0000',\r\n // Specifies the current text style to use when drawing text.\r\n // font: '{fontWeight} {fontSize} {fontFamily}'\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '20px serif'\r\n font: 'bold 48px serif',\r\n // Specifies drawing type to use when drawing text.\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"fill\", \"stroke\"].includes(value) }\r\n // default: () => 'fill'\r\n drawType: 'fill',\r\n // Specifies the current text alignment used when drawing text\r\n // The alignment is relative to the x value\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"left\", \"right\", \"center\", \"start\", \"end\"].includes(value) }\r\n // default: () => 'start'\r\n textAlign: 'left',\r\n // Specifies the current text baseline used when drawing text\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", \"bottom\"].includes(value) }\r\n // default: () => 'alphabetic'\r\n textBaseline: 'top',\r\n // The rotation angle, clockwise in radians\r\n // \r\n // type: Number\r\n // required: false\r\n rotate: 45\r\n }\r\n}\r\n```\r\n\r\n
\r\n\r\n## Methods\r\n\r\n
\r\n\r\n| Method Name | Return Value | Description |\r\n|-----------------------|:-----------------:|-------------------------------------------------------|\r\n| getCoordinates(event) | `{ x: 0, y: 0 }` | Get x-axis and y-axis coordinates from current canvas |\r\n| reset() | | Reset current canvas to new state |\r\n| undo() | | Remove last drawing stroke on current canvas |\r\n| redo() | | Re-draw last removed stroke on current canvas |\r\n| redraw() | | Redraw all strokes on current canvas |\r\n| isEmpty() | `true` or `false` | Get current canvas empty state |\r\n\r\n
\r\n\r\n# Changelog\r\n[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)\r\n\r\n
\r\n\r\n# License\r\n[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)\r\n","readmeFilename":"README.md","gitHead":"bdbbf9fa63113c413be2b3b742a988c0b8d549c2","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.4-beta.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.3","dist":{"integrity":"sha512-ZoPkZTcg/pRqOp0oAgqElNcfQIbxac4TBnA0dG2gV117maKuj27UbsG0ziT4gv/Np6UgkAIWnmu+5+2uAYdfYg==","shasum":"33c7e5a5b502ec32e6571ec1ccfb9653d26639dc","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.4-beta.1.tgz","fileCount":7,"unpackedSize":67156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn1/YCRA9TVsSAnZWagAAwXoP+gIrghA/NbqFrHq8zPZo\nJEtuL0ftXZrxNQyS+x5jt87LyHxKpPIFwqbwXGTl2tpknkcSzlmVqid4GHti\n+k9zbTe1pdZtB+phRKaORBtYYXikDr3S4WR+0ZogGW52LY8pDgQ1tCi1ieh3\nG+HnP6tGrpFtN53zsG0gzLkKfyT/OMqaK1lG+MQWNeC3Bafnoi/bUshCOSSV\nrzDahxXrJr19OKCemz5HbLG9inbRen1wmCr1VxbWQI3gmZKynQhuBuDIwRSm\nmUr6mE+Y/bLqPPDYX9AJ9h1IHrkTDJfTpKNoEAyphYTQvcAhgQ2vwzCnW1y0\nmfJ0J1GJc3WU7+qsJJjD2UJ9eeHBEkCd7mc+5aVFcmrwXfOiovT0tbqbdE7r\nvkEDZg+/tD2GqkfcCSWlRPMd4wnxRFuj0l/41dWSwxFXHrZGtjljYqRGw1eq\nK5tU35rPq2h97W+q3JJ7qbW4KrTVJu7p3xNHuBygge1xSGZHCdRhe/eaAS1i\nKEMnzoAYQRmFw5SITO02e84i6Ip5u90BPG6pH2s7IPSH3QTua3qC2Kcojv0K\nm0Z4shHCUHlrGBN+f/SrDIERhUl47hjeFPWz4T30s/HjfMDObeUqwtHZFJQI\nyAeHUf5cG9U3qXOvhenBPtuSf9rmJiKlldOZIDTypnSUHl4wVw3KiGYfwEsD\noRIz\r\n=Ut6e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4KWagB/hHGCcdMCSPjKquboxbBgP66W5boBolUX31ygIgIR58boitj6PiNuC5LxbrN5Pvh0/lKWiVMTXy93rl8UU="}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.4-beta.1_1637834712063_0.08809263660928024"},"_hasShrinkwrap":false},"1.0.4":{"name":"vue-drawing-canvas","version":"1.0.4","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.ssr.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.min.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@babel/preset-typescript":"^7.14.5","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.13","@vue/cli-plugin-typescript":"^4.5.13","@vue/cli-service":"^4.5.13","@vue/compiler-sfc":"^3.0.11","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.2.10","rimraf":"^3.0.2","rollup":"^2.52.8","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.12","typescript":"^4.0.3","vue":"^3.0.5","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"gitHead":"969df523d622a3bc5afbbcf5b728b3d599406077","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.4","_nodeVersion":"16.13.0","_npmVersion":"8.1.3","dist":{"integrity":"sha512-qUC1wcLjseOkjBN5dajdYZokEZ6VgLKJ7cYce8OXgdxI2gUqjR3fYf3XXMq5CwOxXNANGdQYipzm3XGJamkR+g==","shasum":"1d9f0ab615f4ee344286dd6dc58b550f02ad9530","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.4.tgz","fileCount":7,"unpackedSize":67149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpb10CRA9TVsSAnZWagAAe6EP/R/21ywocAfYM7FM7csf\nm+3FxDH/rqCGl0QYBTjAaCFCBDmUtgZykmBo5VzpaVEMug5BsNiGGJEKHqJ4\neoevd2MASogphqkKkbkQ+t+vteA3Yu4Hp0UYoRBTFEzAKyYEGtksXsBDbBaZ\n+RPHucRENKvgUZpefEr8qKJ5GoH8HzMcMr9cj3gj+U5990tZSim9qmlGRKBI\n0nbcj/W+tBNzozN+QjdXRHxDnqAKLxCsBNDJf4gILtgSLiC79FCKm0Ce7C++\nGUaZ3yKHoQWYNJoHnWtxmXhChiiezXtKLWjJy1ZMFQsPA37krU57LMbIeJ6U\n2imHY79Ft8B68xwMR+JQFgzzIa5+KdGfjTcU/N3A/4Vv81a4IptLW4UIftf5\nGLzwsTi4j8u3Oha3XKJviWIt3NtkBalRZv4F3UHfC2rahPAEFLDNBHSXuThy\n7OvxM+iuFKX3m+YO5W8LsUd7iHidW9ZcwbvRNSueub3TyCraDy7qQv3DJIdR\nW6NeglRsUnI40wQZCduJGOhZrdUlGkGGRg6j1HikBLBCCwkH7XujC3ifB2KO\nAdkcm7MJgQM4UyfT17G5VlX2uu0feM0NW9RB7yCzKhV5xiAQi+cV48dsmMHz\nLma1LXpapBAdZpz9ZGB/TwnkoJv22kH14Xkvj+oddZtBQiAx2NKuorZF2dgT\niqjY\r\n=mESY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAPwpc2S3oOhaKYedRnsmj25ovCx74ATroWCaqg4GUVcAiEAlce2JVV42LIKAk1qg5UNCKkfBptDUos1O6WSsNRUoZA="}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.4_1638251892732_0.9100520103552816"},"_hasShrinkwrap":false},"1.0.5":{"name":"vue-drawing-canvas","version":"1.0.5","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.ssr.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.min.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@babel/preset-typescript":"^7.14.5","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.13","@vue/cli-plugin-typescript":"^4.5.13","@vue/cli-service":"^4.5.13","@vue/compiler-sfc":"^3.0.11","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.2.10","rimraf":"^3.0.2","rollup":"^2.52.8","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.12","typescript":"^4.0.3","vue":"^3.0.5","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"gitHead":"7923b54398f27c572e7d3f4c15961620eb858b42","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.5","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-o0HXvVc0oZxeEbyvoFau6YR6dcz62VBEqDKvGBCR3WuKl5ushuofKrwGnyH/t8pSKo4ZvzbO5FkVQoP2VkxYjg==","shasum":"cfae7c3673286c24cf4373501813974a659fbb31","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.5.tgz","fileCount":8,"unpackedSize":69612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtARQCRA9TVsSAnZWagAA/vwP/jwsandpJuj0Vd1Cbwf2\n9tIr5VzE8D0FmpAgWHsU9lfIVMsGMBGy48VRwjWsf12WOrBAr7RTxSSaA+TI\nxdS2A/L78YmejaofBk1H8IRfLh/0yNYs9kT62iQ1/rWQ/LDP7Ft6Yu0TtPs/\noWJNQ1qO5if5LbI4jusCDHEo1ekD5lrYJ1an0siA3L7xwbf/gSNcLHyBJhVW\neI/yOqGU6C3IcU9MKcAwNW1DTLltr78ulLESMZBdPBVPlSkpXsB2n4/BrkgJ\nHtmfB0FIrxVgWGSn3zJ1enCDzX7NUpGG8T4EyPkTNtERNyCAkALCVkYYM/x3\n/ie9Yy2kyXeElBE+14K+1TPf0W2H4FKPk0cA2S/Cr21V+vPQ/FARLLAdqFj7\nsUSTBoEL7Wb2IJVFnBKH/geThiNH//naJxCLmd31uss8amdLh148ygMr0EF0\nPBlUP5rAfVPdOA91/TFlA68iDL3k1ijIwvLf6T/Hm18HueJzxZY/nIJVLmoq\nxbAfVQHBrvW6XQSjkwISEAzYKv4Dd87RojolG+ELMmTtw7oreWyZxj5WN4k+\n+K0fF9FOZ8XKJYMLo2hTGbtI1suaHAWv3wJCmkNxRhhF3LfKm7OZ8gyVj1NV\nz7cUMjPuhgW7hnZuupMBQX6ndnQcW+8wGHgE6LHz6vfja2Sx8DdI7d9qZNsZ\nIcnk\r\n=TfY2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFXvATYIcKhr610l66zvYAHY0t2hN84B3EkhPUMIL2H0AiEA77q3/tim3r0ka9ZuwwXKI03EDyslDYtZTILqyfrsmNc="}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.5_1639187536536_0.6177668357524015"},"_hasShrinkwrap":false},"1.0.6-rc.1":{"name":"vue-drawing-canvas","version":"1.0.6-rc.1","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.ssr.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.min.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@babel/preset-typescript":"^7.14.5","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.13","@vue/cli-plugin-typescript":"^4.5.13","@vue/cli-service":"^4.5.13","@vue/compiler-sfc":"^3.0.11","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.2.10","rimraf":"^3.0.2","rollup":"^2.52.8","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.12","typescript":"^4.0.3","vue":"^3.0.5","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"readme":"vue-drawing-canvas
\r\n\r\nVueJS Component for drawing on canvas.\r\n\r\nSupport for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)\r\n\r\n
\r\n\r\nDemo
\r\n\r\n### Vue 3\r\n\r\n[](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)\r\n\r\n### Vue 2\r\n\r\n> Deployed on a nuxt container which have access to terminal\r\n\r\n
\r\n\r\n[](https://codesandbox.io/s/vue-drawing-canvas-p4slb)\r\n\r\n
\r\n\r\nTable of Contents
\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Props](#props)\r\n - [Watermark Object](#watermark-object)\r\n - [Methods](#methods)\r\n- [Changelog](#changelog)\r\n- [License](#license)\r\n\r\n
\r\n\r\n# Installation\r\nInstall using package manager:\r\n```bash\r\nnpm install --save-dev vue-drawing-canvas\r\n\r\n# or with Vue 2\r\n\r\nnpm install --save-dev vue-drawing-canvas @vue/composition-api\r\n```\r\n\r\nThen add it to your component files\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n
\r\n\r\n# Usage\r\n\r\n## Props\r\n\r\n
\r\n\r\n| Name | Type | Default Value | Description |\r\n| --------------- | :-------------------: | :----------------: | -------------------------------------------------------------------------------------------------------------------------------- |\r\n| canvasId | String | `VueDrawingCanvas` | Specifies your canvas |\r\n| width | String, Number | `600` | Specifies canvas width |\r\n| height | String, Number | `400` | Specifies canvas height |\r\n| image | String | | Your v-model to get canvas output to an base64 image |\r\n| strokeType | String | `\"dash\"` | Specifies stroke type to draw on canvas.
Accepted value `\"dash\"`, `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"half_triangle\"` |\r\n| fillShape | Boolean | `false` | Specifies if the shape must be filled with the current fill style |\r\n| eraser | Boolean | `false` | Props to change state from drawing to erasing |\r\n| color | String | `\"#000000\"` | Specifies the color, gradient, or pattern to use for the strokes |\r\n| lineWidth | Number | `5` | Sets the thickness of line |\r\n| lock | Boolean | `false` | Lock canvas for drawing |\r\n| backgroundColor | String | `\"#FFFFFF\"` | Set background color on your canvas |\r\n| backgroundImage | String | | Set background image on your canvas
***Be carefull for performance issue when using this props !!*** |\r\n| classes | Array, String, Object | | Specifies your own classes to canvas |\r\n| styles | Array, String, Object | | Specifies your own styles to canvas |\r\n| watermark | Object | | Put watermark text/image on your image output
(see details in the next section below) |\r\n| saveAs | String | `\"png\"` | Specifies output type. This props accept either `\"png\"` or `\"jpeg\"` |\r\n\r\n
\r\n\r\n### Watermark Object\r\n\r\n
\r\n\r\n```js\r\n{\r\n // Specifies your watermark type. Type can be either \"Text\" or \"Image\"\r\n // \r\n // type: String\r\n // required: true\r\n // validator: (value) => { return [\"Text\", \"Image\"].includes(value) }\r\n type: \"Text\",\r\n // Specifies your watermark source\r\n // If type is \"Text\" enter your watermark text here\r\n // if type if \"Image\" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file\r\n // \r\n // type: String\r\n // required: true\r\n source: \"Watermark\",\r\n // The x-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n x: 200,\r\n // The y-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n y: 180,\r\n // Specifies width and height for your watermark image\r\n // \r\n // type: Object\r\n // required: false\r\n imageStyle: {\r\n // The width to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.width\r\n width: 600,\r\n // The height to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.height\r\n height: 400\r\n },\r\n // Specifies text style for your watermark\r\n // \r\n // type: Object\r\n // required: false\r\n fontStyle: {\r\n // The maximum number of pixels wide the text may be once rendered.\r\n // If not specified, there is no limit to the width of the text. \r\n // \r\n // type: Number\r\n // required: false\r\n width: 200,\r\n // Sets the height of text in pixels. Usually this value has same value with font\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => 20\r\n lineHeight: 48,\r\n // Specifies the color, gradient, or pattern to use for the text\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '#000000'\r\n color: '#FF0000',\r\n // Specifies the current text style to use when drawing text.\r\n // font: '{fontWeight} {fontSize} {fontFamily}'\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '20px serif'\r\n font: 'bold 48px serif',\r\n // Specifies drawing type to use when drawing text.\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"fill\", \"stroke\"].includes(value) }\r\n // default: () => 'fill'\r\n drawType: 'fill',\r\n // Specifies the current text alignment used when drawing text\r\n // The alignment is relative to the x value\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"left\", \"right\", \"center\", \"start\", \"end\"].includes(value) }\r\n // default: () => 'start'\r\n textAlign: 'left',\r\n // Specifies the current text baseline used when drawing text\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", \"bottom\"].includes(value) }\r\n // default: () => 'alphabetic'\r\n textBaseline: 'top',\r\n // The rotation angle, clockwise in radians\r\n // \r\n // type: Number\r\n // required: false\r\n rotate: 45\r\n }\r\n}\r\n```\r\n\r\n
\r\n\r\n## Methods\r\n\r\n
\r\n\r\n| Method Name | Return Value | Description |\r\n|-----------------------|:-----------------:|-------------------------------------------------------|\r\n| getCoordinates(event) | `{ x: 0, y: 0 }` | Get x-axis and y-axis coordinates from current canvas |\r\n| reset() | | Reset current canvas to new state |\r\n| undo() | | Remove last drawing stroke on current canvas |\r\n| redo() | | Re-draw last removed stroke on current canvas |\r\n| redraw() | | Redraw all strokes on current canvas |\r\n| isEmpty() | `true` or `false` | Get current canvas empty state |\r\n\r\n
\r\n\r\n# Changelog\r\n[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)\r\n\r\n
\r\n\r\n# License\r\n[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)\r\n","readmeFilename":"README.md","gitHead":"e0e5baf51962f0b2c0bc9339cb98fdbec2c56498","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.6-rc.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ugKyzCZmgvIiDFY2xD157zi4S4JlNLysEsnd9AHzG9GZlSrGeplfPzK7Y9msqGTxLbKR6PcKzyFcUF32IgrK+g==","shasum":"dd492d5eb8862ae47c75c4cc93c4bba964d31103","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.6-rc.1.tgz","fileCount":8,"unpackedSize":70497,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhts2oCRA9TVsSAnZWagAAsugP/A2rRkWhy7UvYTh2u1/U\n2Jvfmti5KzOf8sR5l24RrOBTSWWP/RCrWWzot7PwLap9XhuH5u2jp7QIhNgg\nQ7q3HcA7wPNvs6e6RgmRQXw7PMbckDCWt/axb886dVJnaH78ljhibkKJIFju\nmA+VLayhsLnTFzR+bdsrA8Z/g9cHMuc/xApvLZESWtsmCEZgYCZwqG9PXQBg\nww9Tkuek8Zx8ith4+y/xd2f0RZ0VqctwVtBeHp4ELbf9mHDHZrBOWnpKqsY7\nZLsRsR1xwsTwmQtkV2RYNas9FwIKmbuEsx1MuighpJ246cOVsqlCtyoicLTc\nxoEPZecp9n/ZlkeAjTiLfbYoMICaRHDfiBNTRKU45Qe6NilHkLC7MGQAZEni\nj/S3NmoMJaU8iGP9J2Q1CFiJUBH2fCrJ5iCER4YCnWTgpEW0D1IcLfAuc2ys\n98IiKmdFJs87Gr5xUnve+SHfE3o74eKwspqQlwV++XHWz4SnFfYkMR6dfJZR\nhWVe0OQ8XHS77MsWEaqQB2xsr1QFKqg8EvXTTfgxsVVyCqcIIVbiDgqLKuuh\n8ROAOHmqCsWDOjRxjy+GBUo0msurfpbAimBliSJChwhsoX+p7NuYtNbvKM6p\ntBXOWSjBvIvRbF/JfVXsG27U1vWdcVC+ZS5WdLF3MO6rhIc+pWDURShOGFqU\na+bt\r\n=Kn8b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuiIWk+TBisTIEaEqE35K6nWR/QGFIK/uRZaXZg3HVcwIhAPRBFp0LjurJofO7+r1O9CbkMUyCYEzCO+a1u19RRZbL"}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.6-rc.1_1639370152743_0.3857554431816008"},"_hasShrinkwrap":false},"1.0.6":{"name":"vue-drawing-canvas","version":"1.0.6","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.ssr.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.min.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@babel/preset-typescript":"^7.14.5","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.13","@vue/cli-plugin-typescript":"^4.5.13","@vue/cli-service":"^4.5.13","@vue/compiler-sfc":"^3.0.11","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.2.10","rimraf":"^3.0.2","rollup":"^2.52.8","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.12","typescript":"^4.0.3","vue":"^3.0.5","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"gitHead":"e0e5baf51962f0b2c0bc9339cb98fdbec2c56498","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.6","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Y2R6WdnwXDG/hCvCa388Qgn+Klzmenn4vIC5/KNwRX4ikeQf+oJBbSYX7uZVU29U2BvoFdJY5laqj7scupyuqg==","shasum":"22e3bd56d4fb0d7f40e319af2abefdb8a7a78f64","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.6.tgz","fileCount":8,"unpackedSize":70492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhts5oCRA9TVsSAnZWagAAoA4P/ibW+K/9IqobPU2gWm+f\nhClZlgwdYul6Bo7pJZC14kg2wA2Yfs3+9O+204vXu/A7UddpiwmYL0k1D/s7\nm8c0P0EHwXuBG9QvKTGJvGTs2DqSl5uItbheNaejSZnB/TVykQ4+hbJhphvF\ndDc4ITLKlbcHdL5co0YG6YH/KTztkIS1H8rt2ZDb/o0QTTTZ7ngH6hEF2iH8\nYdrLXHC7CoNojO0zes/7uDvKEOR3OVLw5flh67ccc2LVrnAfscEXMrBcjvd4\nFxhWq9DqaVdy+0iArPHweV+ABeZTdntDdMbpMBbnmNTi8i9lYSK/g5bylRxp\nVl97aRCvARxy50dVdgew6Qj0UaSUgOmey4Ykh6uSmAD4fIKbuVBYVy3VF2fH\nU/2Lj6LXzsDhcGn6igZlcoyjeewgfUuRVmUowYIZqj2QB4pY46EYgdY1A8VQ\nPguQNUoZR1unqRribc90ENmDNoR/oF1YapyYooZuLl8G+AhhzwUEY39bTRPp\nu2TTO88OkJh4QPWKoxZ9iAQU2WtmXCRpFznq2m2q0UjiPOWUUOe0iFUDINTG\nUR7Rpr4Bi/OfoadTQmLVvuAucw4iQhZBXn/JN8VgFVAYP9yCegKyZfjbZCvb\nvKEtSDtWFgryFA8otE+bi/5ZT7zY1k8X0XEQzhyXpeScFz2Q/syj7/qip8Lx\nTQYE\r\n=H3OS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEmTP9HJJHKbc+m2ht5YOkWd9gVBlLszFPBDb7e/d5UsAiEAnjmN2+xz4Aegf1PlRdJCUbDprvQJ8cVYneCPr0FyRX4="}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.6_1639370344631_0.9432789237381407"},"_hasShrinkwrap":false},"1.0.7-rc.1":{"name":"vue-drawing-canvas","version":"1.0.7-rc.1","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.ssr.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.min.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"readme":"vue-drawing-canvas
\r\n\r\nVueJS Component for drawing on canvas.\r\n\r\nSupport for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)\r\n\r\n
\r\n\r\nDemo
\r\n\r\n### Vue 3\r\n\r\n[](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)\r\n\r\n### Vue 2\r\n\r\n> Deployed on a nuxt container which have access to terminal\r\n\r\n
\r\n\r\n[](https://codesandbox.io/s/vue-drawing-canvas-p4slb)\r\n\r\n
\r\n\r\nTable of Contents
\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Props](#props)\r\n - [Watermark Object](#watermark-object)\r\n - [Methods](#methods)\r\n- [Changelog](#changelog)\r\n- [License](#license)\r\n\r\n
\r\n\r\n# Installation\r\nInstall using package manager:\r\n```bash\r\nnpm install --save-dev vue-drawing-canvas\r\n\r\n# or with Vue 2\r\n\r\nnpm install --save-dev vue-drawing-canvas @vue/composition-api\r\n```\r\n\r\nThen add it to your component files\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n
\r\n\r\n# Usage\r\n\r\n## Props\r\n\r\n
\r\n\r\n| Name | Type | Default Value | Description |\r\n| --------------- | :-------------------: | :----------------: | -------------------------------------------------------------------------------------------------------------------------------- |\r\n| canvasId | String | `VueDrawingCanvas` | Specifies your canvas id |\r\n| width | String, Number | `600` | Specifies canvas width |\r\n| height | String, Number | `400` | Specifies canvas height |\r\n| image | String | | Your v-model to get canvas output to an base64 image |\r\n| strokeType | String | `\"dash\"` | Specifies stroke type to draw on canvas.
Accepted value `\"dash\"`, `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"half_triangle\"` |\r\n| fillShape | Boolean | `false` | Specifies if the shape must be filled with the current fill style |\r\n| eraser | Boolean | `false` | Props to change state from drawing to erasing |\r\n| color | String | `\"#000000\"` | Specifies the color, gradient, or pattern to use for the strokes |\r\n| lineWidth | Number | `5` | Sets the thickness of line |\r\n| lock | Boolean | `false` | Lock canvas for drawing |\r\n| backgroundColor | String | `\"#FFFFFF\"` | Set background color on your canvas |\r\n| backgroundImage | String | | Set background image on your canvas
***Be carefull for performance issue when using this props !!*** |\r\n| initialImage | Array | `[]` | Draw strokes and shapes from canvas you've worked before |\r\n| classes | Array, String, Object | | Specifies your own classes to canvas |\r\n| styles | Array, String, Object | | Specifies your own styles to canvas |\r\n| watermark | Object | | Put watermark text/image on your image output
(see details in the next section below) |\r\n| saveAs | String | `\"png\"` | Specifies output type. This props accept either `\"png\"` or `\"jpeg\"` |\r\n\r\n
\r\n\r\n### Watermark Object\r\n\r\n
\r\n\r\n```js\r\n{\r\n // Specifies your watermark type. Type can be either \"Text\" or \"Image\"\r\n // \r\n // type: String\r\n // required: true\r\n // validator: (value) => { return [\"Text\", \"Image\"].includes(value) }\r\n type: \"Text\",\r\n // Specifies your watermark source\r\n // If type is \"Text\" enter your watermark text here\r\n // if type if \"Image\" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file\r\n // \r\n // type: String\r\n // required: true\r\n source: \"Watermark\",\r\n // The x-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n x: 200,\r\n // The y-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n y: 180,\r\n // Specifies width and height for your watermark image\r\n // \r\n // type: Object\r\n // required: false\r\n imageStyle: {\r\n // The width to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.width\r\n width: 600,\r\n // The height to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.height\r\n height: 400\r\n },\r\n // Specifies text style for your watermark\r\n // \r\n // type: Object\r\n // required: false\r\n fontStyle: {\r\n // The maximum number of pixels wide the text may be once rendered.\r\n // If not specified, there is no limit to the width of the text. \r\n // \r\n // type: Number\r\n // required: false\r\n width: 200,\r\n // Sets the height of text in pixels. Usually this value has same value with font\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => 20\r\n lineHeight: 48,\r\n // Specifies the color, gradient, or pattern to use for the text\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '#000000'\r\n color: '#FF0000',\r\n // Specifies the current text style to use when drawing text.\r\n // font: '{fontWeight} {fontSize} {fontFamily}'\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '20px serif'\r\n font: 'bold 48px serif',\r\n // Specifies drawing type to use when drawing text.\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"fill\", \"stroke\"].includes(value) }\r\n // default: () => 'fill'\r\n drawType: 'fill',\r\n // Specifies the current text alignment used when drawing text\r\n // The alignment is relative to the x value\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"left\", \"right\", \"center\", \"start\", \"end\"].includes(value) }\r\n // default: () => 'start'\r\n textAlign: 'left',\r\n // Specifies the current text baseline used when drawing text\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", \"bottom\"].includes(value) }\r\n // default: () => 'alphabetic'\r\n textBaseline: 'top',\r\n // The rotation angle, clockwise in radians\r\n // \r\n // type: Number\r\n // required: false\r\n rotate: 45\r\n }\r\n}\r\n```\r\n\r\n
\r\n\r\n## Methods\r\n\r\n
\r\n\r\n| Method Name | Return Value | Description |\r\n|-----------------------|:-------------------------------:|-------------------------------------------------------|\r\n| getCoordinates(event) | `{ x: 0, y: 0 }` | Get x-axis and y-axis coordinates from current canvas |\r\n| reset() | | Reset current canvas to new state |\r\n| undo() | | Remove last drawing stroke on current canvas |\r\n| redo() | | Re-draw last removed stroke on current canvas |\r\n| redraw() | | Redraw all strokes on current canvas |\r\n| isEmpty() | `true` or `false` | Get current canvas empty state |\r\n| getAllStrokes() | _`Array of strokes and shapes`_ | Get all strokes and shapes from canvas |\r\n\r\n
\r\n\r\n# Changelog\r\n[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)\r\n\r\n
\r\n\r\n# License\r\n[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)\r\n","readmeFilename":"README.md","gitHead":"aafd30c363ec0400a3813b1e1b6bfb05401b747a","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.7-rc.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-78RLOm+jhFC9WWgV66kGbkArh6ts0m5dxXszqk9kIOu/Dlv4bw42Cqd3E1IGDHvufMIkUjKqy4Q2fexzpiqL0A==","shasum":"8dd5e3953ee97e10f3b49983ae0ff9741886498a","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.7-rc.1.tgz","fileCount":8,"unpackedSize":72635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwp7CCRA9TVsSAnZWagAA9CoP/1GgIXLDjTYIT3mgE7EG\nrp05L6pVayWK14TRSFoG6nTdTeAjAZAX+VewQ59twvNz0heg4BQDOwuhPmkK\nN66/nK/PphCUE1f7VbF3jVTferlg07FpD1HJczO6LN0BenPMCoxQkQtZUdk/\nnLyODmA0w+dH5kGzO9YFG7yCINEbYR8zMoT+JNgS/ROVp1H3nPvGj+wIMUxi\n0xudlqdnezcy77Fvu0kSu3Wyx+Ui6eSEMXJSncwNET8WhPfWUJ1j7Vx9Oewi\nfF+gl+SILZVnfjRIA3B8ET0ta513mGEXb/viUWElhFPWd2GSwfpcNg3WC+Zp\nv1lpAUN/p3XgaKXSub9053JZKZx/ukEjQKN30y0JiVWf+T12W31TLXdnR9IB\n3PFbk2y4vAWKikcnfyqHLLau5k+Pm7BJsoYJ1giDzo7Awf6yIedb5GUo4yid\nGv8ZoO9ln8gT1D/QC19lN+1A3rGsPNaIeYrUuPgQa2IqEL8PKik4yOemQpF9\nG55S+vAevEz+yjIaOaLrGrZXzTM8p4e7KnQDBehFeIqTDv3e6+4RGFysvHAP\nbRKFpu5gKzk/YKzNIp1FHxrRTU2d5oZNzJcvM5+ZoYDTb6QXDLgb0QPFFLrL\njFsa7IB4r2KEJshfLf+5nXWG8w+w1qip6lEihWAmKI9viXeKYE2LC3NSNekw\ntPqu\r\n=BLMZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqvxIVt1ly5DI2GMRM83AgftsnE2cS4GmV7TEQFgZvhQIgNoVRyf0SImg7YA+H7AXIb+FPzhmo4CSNs6xn0dsWDho="}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.7-rc.1_1640144578653_0.9208849704852344"},"_hasShrinkwrap":false},"1.0.7":{"name":"vue-drawing-canvas","version":"1.0.7","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.ssr.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.min.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"gitHead":"aafd30c363ec0400a3813b1e1b6bfb05401b747a","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.7","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-rsNZfzq07Lh1gP87tbFLBDAItislQjz9cUBzsg8m/mpLmUITgRpRHOTc4G1AvVdtU1XDNDxZCHHls1imH2lCvw==","shasum":"458441b4be00eae9bb75bee25d5642a486f01691","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.7.tgz","fileCount":8,"unpackedSize":72627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwuN0CRA9TVsSAnZWagAAK7kP/jMeI1MMIi18WGQLBtix\nFJLfS/7cKIeO9AehLLIDPrm3vI5UWOy/rAl3ePx27CGUND07NMTjDDcaeHQS\nx2fSIiOR25DAodMdpZUA7HO4zVaq4xF9vsH6EYasW1uNvh7x4bcCn8nc5V7Y\nr5yssxArS0Cx30/PrA4IryUw1QxNl9lKBrGgZGCKMJDCTNh4R9fazrazCh/N\naOzlThe1CTISFfM+J0U7x25xZ8oFRBO83T5I7mamAvS81NP8QIB6F0ApQIZR\nMhFyD2vv//UpPfL1SK0IuIP+j10CeZEGN629+3YvdbEod7ZyFOm0B4Gyb/bP\nUG5RlO2HM+8EMXWEmpXSyg8OsGRClIzkfFIUudEhlVxVnOJtbemiydnalgOm\nsM8Fa8LiHYBmHC2VJuIbRGjUzO/tH6BhgyRXKF4G9c2O6ftxVd3o/A19vD8H\ncmFzFtuy2YT+4VdIFSWtGlZVlCMBfBYJqLcaiZwTDpaaj/8833dDjqznJazY\nPU5nWbacCT18DfKH/P1VyVCzddWVmO4E3CgkqAti4zreJtjePv3koOpaUBva\nTVA6Cxb2f2Qo+Mzhjcg5HJeJ6u8cW+J627va5lKFUYK/d3k9AK3hyoO8iUdW\nor4FK6/l/q8ie7ejLK7kCX7DGcnMpwv4K5u3yh60oLxkO7nqwSQYOEJH9PQY\n6MSf\r\n=ZKb7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAqYIHMdvKO9Ube0cFm6DKCNpb47xLR/4n6r1n9sQ+WXAiAkfbeGed/MSWI02pbkf69xrwNGYHPyJpDnB0bzY6fn7g=="}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.7_1640162164673_0.47752658031006834"},"_hasShrinkwrap":false},"1.0.8":{"name":"vue-drawing-canvas","version":"1.0.8","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.ssr.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.min.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"gitHead":"d497dbc4703cfd851c795e065c3bd90f70e0c1c2","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.8","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-aZbVvY9h/TYzbgIgdiOrKCFmSIAHJt2hPqLACxSlzUzysyaJWJO5oKxT5TX6SW78RhtqcPX0zAQNHZhUePFW3w==","shasum":"5d5942e3f0c06d8aa0e16e6398eb7369584fa624","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.8.tgz","fileCount":8,"unpackedSize":74916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4auACRA9TVsSAnZWagAADxwP/0Mdw01hO/j02iUNnNL4\nfg5wWfd6k91Xn1vHaPvxZp7KSviU8P5hPFOh1bkptWoWedAVTIuqD3BDFaGO\nTz3NcqXi+nDH4oaFvtAtcQI6y01EfyHR3Mz6/p7jcL4ajpU5PxJxXswFIGON\nVnAPX9W4BOVVUNLZRxxCrzhlucH/OfTLyuuf8Xj2MFZg+oZlAcvyS4yw4LL5\nNFTZzeJmfU2FBcYqRM51dbyWyH/0VS3y5ddHrYr3PwW084gAcBaEe912OP4g\nvXxynR8q6NFlBrl+e9bb0Of4x2MemzY+1FxjaEkZJhaNVuErE1XRX0dR1GcX\nGkRvkMWuh6z7vjGuXOiP1iie08CNuxNQRtVLnI1PG7uQRoPt1U7AYNWyNNAx\nsQqeZgcvFLzrNmUp8Npn7UL/3efxzX84zD7064vMvn1cTwBbJub2JZieeATX\nzk3qb+HAwuAekB14PQj+z84TnfnfAyoz3Pyo1UgT3KRSNevbC29X4RKLqmgl\ng8wzda6IdD6J+62DD7CHfcO6I42/k8WXAfRItD8ZQT0Gu6r5UqS0qM2aNJe2\npIfXJXWDhCf2/7yXKpNcjKbxSe1/vgOSDqAT7AsYXsabEAkr7GaQgsVzSYHb\ne4KKcm6cyPDVAaWV068CjO3LgUme+S60wbBGwXQ/ZW84QtV1rXZe5O+Eq4sq\nZwEb\r\n=930w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHHPwPrIHQ3kvQUUPxkQOT09hM7O65e9RA3PnIXO+B8JAiEA3tPhoyeaBveykkHjbFlJoD0B2QS1+LTM/wR+FSiT4oY="}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.8_1642179456743_0.1707966827243277"},"_hasShrinkwrap":false},"1.0.9-rc.1":{"name":"vue-drawing-canvas","version":"1.0.9-rc.1","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.esm.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.esm.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"readme":"vue-drawing-canvas
\r\n\r\nVueJS Component for drawing on canvas.\r\n\r\nSupport for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)\r\n\r\n
\r\n\r\nDemo
\r\n\r\n### Vue 3\r\n\r\n[](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)\r\n\r\n### Vue 2\r\n\r\n> Deployed on a nuxt container which have access to terminal\r\n\r\n
\r\n\r\n[](https://codesandbox.io/s/vue-drawing-canvas-p4slb)\r\n\r\n
\r\n\r\nTable of Contents
\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Props](#props)\r\n - [Watermark Object](#watermark-object)\r\n - [Methods](#methods)\r\n- [Changelog](#changelog)\r\n- [License](#license)\r\n\r\n
\r\n\r\n# Installation\r\nInstall using package manager:\r\n```bash\r\nnpm install --save-dev vue-drawing-canvas\r\n\r\n# or with Vue 2\r\n\r\nnpm install --save-dev vue-drawing-canvas @vue/composition-api\r\n```\r\n\r\nThen add it to your component files\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n
\r\n\r\n# Usage\r\n\r\n## Props\r\n\r\n
\r\n\r\n| Name | Type | Default Value | Description |\r\n| --------------- | :-------------------: | :----------------: | -------------------------------------------------------------------------------------------------------------------------------- |\r\n| canvasId | String | `VueDrawingCanvas` | Specifies your canvas id |\r\n| width | String, Number | `600` | Specifies canvas width |\r\n| height | String, Number | `400` | Specifies canvas height |\r\n| image | String | | Your v-model to get canvas output to an base64 image |\r\n| strokeType | String | `\"dash\"` | Specifies stroke type to draw on canvas.
Accepted value `\"dash\"`, `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"half_triangle\"` |\r\n| fillShape | Boolean | `false` | Specifies if the shape must be filled with the current fill style |\r\n| eraser | Boolean | `false` | Props to change state from drawing to erasing |\r\n| color | String | `\"#000000\"` | Specifies the color, gradient, or pattern to use for the strokes |\r\n| lineWidth | Number | `5` | Sets the thickness of line |\r\n| lock | Boolean | `false` | Lock canvas for drawing |\r\n| backgroundColor | String | `\"#FFFFFF\"` | Set background color on your canvas |\r\n| backgroundImage | String | | Set background image on your canvas
***Be carefull for performance issue when using this props !!*** |\r\n| initialImage | Array | `[]` | Draw strokes and shapes from canvas you've worked before. [Demo](https://codesandbox.io/s/vue-drawing-canvas-107-rc1-dcoiy) |\r\n| classes | Array, String, Object | | Specifies your own classes to canvas |\r\n| styles | Array, String, Object | | Specifies your own styles to canvas |\r\n| watermark | Object | | Put watermark text/image on your image output
(see details in the next section below) |\r\n| saveAs | String | `\"png\"` | Specifies output type. This props accept either `\"png\"` or `\"jpeg\"` |\r\n\r\n
\r\n\r\n### Watermark Object\r\n\r\n
\r\n\r\n```js\r\n{\r\n // Specifies your watermark type. Type can be either \"Text\" or \"Image\"\r\n // \r\n // type: String\r\n // required: true\r\n // validator: (value) => { return [\"Text\", \"Image\"].includes(value) }\r\n type: \"Text\",\r\n // Specifies your watermark source\r\n // If type is \"Text\" enter your watermark text here\r\n // if type if \"Image\" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file\r\n // \r\n // type: String\r\n // required: true\r\n source: \"Watermark\",\r\n // The x-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n x: 200,\r\n // The y-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n y: 180,\r\n // Specifies width and height for your watermark image\r\n // \r\n // type: Object\r\n // required: false\r\n imageStyle: {\r\n // The width to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.width\r\n width: 600,\r\n // The height to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.height\r\n height: 400\r\n },\r\n // Specifies text style for your watermark\r\n // \r\n // type: Object\r\n // required: false\r\n fontStyle: {\r\n // The maximum number of pixels wide the text may be once rendered.\r\n // If not specified, there is no limit to the width of the text. \r\n // \r\n // type: Number\r\n // required: false\r\n width: 200,\r\n // Sets the height of text in pixels. Usually this value has same value with font\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => 20\r\n lineHeight: 48,\r\n // Specifies the color, gradient, or pattern to use for the text\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '#000000'\r\n color: '#FF0000',\r\n // Specifies the current text style to use when drawing text.\r\n // font: '{fontWeight} {fontSize} {fontFamily}'\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '20px serif'\r\n font: 'bold 48px serif',\r\n // Specifies drawing type to use when drawing text.\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"fill\", \"stroke\"].includes(value) }\r\n // default: () => 'fill'\r\n drawType: 'fill',\r\n // Specifies the current text alignment used when drawing text\r\n // The alignment is relative to the x value\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"left\", \"right\", \"center\", \"start\", \"end\"].includes(value) }\r\n // default: () => 'start'\r\n textAlign: 'left',\r\n // Specifies the current text baseline used when drawing text\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", \"bottom\"].includes(value) }\r\n // default: () => 'alphabetic'\r\n textBaseline: 'top',\r\n // The rotation angle, clockwise in radians\r\n // \r\n // type: Number\r\n // required: false\r\n rotate: 45\r\n }\r\n}\r\n```\r\n\r\n
\r\n\r\n## Methods\r\n\r\n
\r\n\r\n| Method Name | Return Value | Description |\r\n|-----------------------|:-------------------------------:|-------------------------------------------------------|\r\n| getCoordinates(event) | `{ x: 0, y: 0 }` | Get x-axis and y-axis coordinates from current canvas |\r\n| reset() | | Reset current canvas to new state |\r\n| undo() | | Remove last drawing stroke on current canvas |\r\n| redo() | | Re-draw last removed stroke on current canvas |\r\n| redraw() | | Redraw all strokes on current canvas |\r\n| isEmpty() | `true` or `false` | Get current canvas empty state |\r\n| getAllStrokes() | _`Array of strokes and shapes`_ | Get all strokes and shapes from canvas |\r\n\r\n
\r\n\r\n# Changelog\r\n[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)\r\n\r\n
\r\n\r\n# License\r\n[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)\r\n","readmeFilename":"README.md","gitHead":"d497dbc4703cfd851c795e065c3bd90f70e0c1c2","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.9-rc.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-O2g2pTSRL1WDqsjY/CIRz79x+ID1cvZbsuhBX4edWEn4EVToE5sJXFwjwpInBov1Tch0rniiWBzumRPYQP7/yw==","shasum":"b85aad9c3818c7e2bf5e2e82a612e4a1f499b78f","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.9-rc.1.tgz","fileCount":6,"unpackedSize":37123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+hyvCRA9TVsSAnZWagAAgW4P/1YTib7SbE94qFogqGcy\nIh9JLR/w22DHZeqDnH/PYusG8TkfuEd9+CDO37zzN8PW9QHOi9nw2iy2q5wQ\noNGNwbji0qp90j6LFe51ROyXFWp/DyxrPW68qizTbNLiZKyqhew2ZH7g8euT\njzhePfbL0DVlu+ptgzHKzcrPHRQB6Y3fsJlfIM3PLjgcV7VrmdEOW3PrmnpJ\nqzrf8NOCfiHdwtEU7WfQ/oJhhYPrhqA/kDAmxDtVrXvtL25l7LMYjs33Golm\nGXwHd9MI0jMPRGjX9s9+ZBPw9ov907m4ZojTGbtAvZei7CL4xaM+X+gxMiGZ\npCji38X7U7HQN19hsctalemiwieJNk59DHOxYZ+835O0xHr4n0oL7sE4BomD\nizGHeGBUCWNS6z7KTx+McIjxTrlY9clKENTJV25vP8m2tiGwMC09lpN7NEMo\ntI6N2Wuw63k9bNlQPvQsqAMaflgbMbrXrOUr66USyWZz27ZMy1kNFo5Vy4Si\nQ66FxkFGucuXqFukLcQJBXQOqIWjWtcn4QZX2Wwz9s55TgOwmcj8fRuB6axD\nTckxlHN0oZfLWiHurZDK4cZdB91DxFc3tkMl80a8fCJvGzVgzUWogZB7esk6\nvM03VJKcc/0SRXnE+TBaodSaexJK/B47gELK///2KZ9T29s23su/o1SaqwHh\ntixl\r\n=thwz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGDFmvR+5B6RJLcAEN3+dtl+EyLuM1EazLizlxhym9tcAiEAvVrsf24aS6FPNSZA8MKKN1UzFx5i8uqJsmrQg883iZ4="}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.9-rc.1_1643781295421_0.721317608030644"},"_hasShrinkwrap":false},"1.0.9-rc.2":{"name":"vue-drawing-canvas","version":"1.0.9-rc.2","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.esm.js","browser":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","unpkg":"dist/vue-drawing-canvas.esm.js","types":"dist/types/src/entry.esm.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"readme":"vue-drawing-canvas
\r\n\r\nVueJS Component for drawing on canvas.\r\n\r\nSupport for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)\r\n\r\n
\r\n\r\nDemo
\r\n\r\n### Vue 3\r\n\r\n[](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)\r\n\r\n### Vue 2\r\n\r\n> Deployed on a nuxt container which have access to terminal\r\n\r\n
\r\n\r\n[](https://codesandbox.io/s/vue-drawing-canvas-p4slb)\r\n\r\n
\r\n\r\nTable of Contents
\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Props](#props)\r\n - [Watermark Object](#watermark-object)\r\n - [Methods](#methods)\r\n- [Changelog](#changelog)\r\n- [License](#license)\r\n\r\n
\r\n\r\n# Installation\r\nInstall using package manager:\r\n```bash\r\nnpm install --save-dev vue-drawing-canvas\r\n\r\n# or with Vue 2\r\n\r\nnpm install --save-dev vue-drawing-canvas @vue/composition-api\r\n```\r\n\r\nThen add it to your component files\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n
\r\n\r\n# Usage\r\n\r\n## Props\r\n\r\n
\r\n\r\n| Name | Type | Default Value | Description |\r\n| --------------- | :-------------------: | :----------------: | -------------------------------------------------------------------------------------------------------------------------------- |\r\n| canvasId | String | `VueDrawingCanvas` | Specifies your canvas id |\r\n| width | String, Number | `600` | Specifies canvas width |\r\n| height | String, Number | `400` | Specifies canvas height |\r\n| image | String | | Your v-model to get canvas output to an base64 image |\r\n| strokeType | String | `\"dash\"` | Specifies stroke type to draw on canvas.
Accepted value `\"dash\"`, `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"half_triangle\"` |\r\n| fillShape | Boolean | `false` | Specifies if the shape must be filled with the current fill style |\r\n| eraser | Boolean | `false` | Props to change state from drawing to erasing |\r\n| color | String | `\"#000000\"` | Specifies the color, gradient, or pattern to use for the strokes |\r\n| lineWidth | Number | `5` | Sets the thickness of line |\r\n| lock | Boolean | `false` | Lock canvas for drawing |\r\n| backgroundColor | String | `\"#FFFFFF\"` | Set background color on your canvas |\r\n| backgroundImage | String | | Set background image on your canvas
***Be carefull for performance issue when using this props !!*** |\r\n| initialImage | Array | `[]` | Draw strokes and shapes from canvas you've worked before. [Demo](https://codesandbox.io/s/vue-drawing-canvas-107-rc1-dcoiy) |\r\n| classes | Array, String, Object | | Specifies your own classes to canvas |\r\n| styles | Array, String, Object | | Specifies your own styles to canvas |\r\n| watermark | Object | | Put watermark text/image on your image output
(see details in the next section below) |\r\n| saveAs | String | `\"png\"` | Specifies output type. This props accept either `\"png\"` or `\"jpeg\"` |\r\n\r\n
\r\n\r\n### Watermark Object\r\n\r\n
\r\n\r\n```js\r\n{\r\n // Specifies your watermark type. Type can be either \"Text\" or \"Image\"\r\n // \r\n // type: String\r\n // required: true\r\n // validator: (value) => { return [\"Text\", \"Image\"].includes(value) }\r\n type: \"Text\",\r\n // Specifies your watermark source\r\n // If type is \"Text\" enter your watermark text here\r\n // if type if \"Image\" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file\r\n // \r\n // type: String\r\n // required: true\r\n source: \"Watermark\",\r\n // The x-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n x: 200,\r\n // The y-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n y: 180,\r\n // Specifies width and height for your watermark image\r\n // \r\n // type: Object\r\n // required: false\r\n imageStyle: {\r\n // The width to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.width\r\n width: 600,\r\n // The height to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.height\r\n height: 400\r\n },\r\n // Specifies text style for your watermark\r\n // \r\n // type: Object\r\n // required: false\r\n fontStyle: {\r\n // The maximum number of pixels wide the text may be once rendered.\r\n // If not specified, there is no limit to the width of the text. \r\n // \r\n // type: Number\r\n // required: false\r\n width: 200,\r\n // Sets the height of text in pixels. Usually this value has same value with font\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => 20\r\n lineHeight: 48,\r\n // Specifies the color, gradient, or pattern to use for the text\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '#000000'\r\n color: '#FF0000',\r\n // Specifies the current text style to use when drawing text.\r\n // font: '{fontWeight} {fontSize} {fontFamily}'\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '20px serif'\r\n font: 'bold 48px serif',\r\n // Specifies drawing type to use when drawing text.\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"fill\", \"stroke\"].includes(value) }\r\n // default: () => 'fill'\r\n drawType: 'fill',\r\n // Specifies the current text alignment used when drawing text\r\n // The alignment is relative to the x value\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"left\", \"right\", \"center\", \"start\", \"end\"].includes(value) }\r\n // default: () => 'start'\r\n textAlign: 'left',\r\n // Specifies the current text baseline used when drawing text\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", \"bottom\"].includes(value) }\r\n // default: () => 'alphabetic'\r\n textBaseline: 'top',\r\n // The rotation angle, clockwise in radians\r\n // \r\n // type: Number\r\n // required: false\r\n rotate: 45\r\n }\r\n}\r\n```\r\n\r\n
\r\n\r\n## Methods\r\n\r\n
\r\n\r\n| Method Name | Return Value | Description |\r\n|-----------------------|:-------------------------------:|-------------------------------------------------------|\r\n| getCoordinates(event) | `{ x: 0, y: 0 }` | Get x-axis and y-axis coordinates from current canvas |\r\n| reset() | | Reset current canvas to new state |\r\n| undo() | | Remove last drawing stroke on current canvas |\r\n| redo() | | Re-draw last removed stroke on current canvas |\r\n| redraw() | | Redraw all strokes on current canvas |\r\n| isEmpty() | `true` or `false` | Get current canvas empty state |\r\n| getAllStrokes() | _`Array of strokes and shapes`_ | Get all strokes and shapes from canvas |\r\n\r\n
\r\n\r\n# Changelog\r\n[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)\r\n\r\n
\r\n\r\n# License\r\n[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)\r\n","readmeFilename":"README.md","gitHead":"d497dbc4703cfd851c795e065c3bd90f70e0c1c2","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.9-rc.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-m2V4UrIYOA4OnJwqvga0OgHpFJ7ov9YWjcrwtof7xKdk1uDrE8uYV43N623dqywfxpsxMMG/O2+GBXP6+87T5g==","shasum":"9712a18a5b817d136a7730b3f22f7e268de97928","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.9-rc.2.tgz","fileCount":6,"unpackedSize":38458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/ZUnCRA9TVsSAnZWagAAGQwQAI2gXzrvro5fJ1p0gUj5\ngk48oVwPDjrp17nu4GjfFW3BYjbnHw/VYhtEAHApiCtQm6/16RtpHiuvVITb\nNBo/Cx8eTQJYMafwR3+K96hKfoFa1qAp7wkUkxPhSvmw2NXpWJiSvvmobelo\nZdnUEe6TGCBOahDzZyzR0yil53klIN5zE2yEWcEUEGi3EdKVqCeLHRpIhZDv\n2Y9h5z91AedAa7ObgXdQIaRucVUw5DD30nx8YLzVewcTsXv8R8rg71+JK68q\nW1V71W10sV/H6/cXmF8B1KuVphMADKOTgGKkHWwD9tQAT3aoSOpeuIk1Cns4\nKNMPBmVcSpOBn6J62F0+TpI4hcu4cKmY9vpi6R2uf4odlWp1AofwxzUJiXEe\nxx9YtxpZZ+uPfvVq78x3SGRV5j9mY8i5Qc2kieTIZRflFqpO6gyY8Z8REicI\nhOJ0xnX9WEmajwMazxQSTrnkMblOzoZ1IGX+f4B0l9mAz41N23sJGM5TKJSC\nkfciGHyjtNsAPb0F4D5qjDIhRxG2e6uWG3fc0vPicU9yfTbH7LicSkrUJrnM\n4s27KL5ciNCyeQ01lHjrCV7pWPljV/RSBK8qQLnHa8+udWaKFd1FtY06UGIO\nfASR0zyMclIoXWkAivqn/I3L0qMnEid5mQ4Pwa0ie2Yia1i3DUqyprKGpds7\nxsa9\r\n=mS3N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5UaekKW8kLt+xdHTHZh4wOP9EdAQ5i8svohM9wrumiQIgHB/M93cg9Hxv8gZ7oNrqdby4cLVCGKlWOi0Jc4vpvNc="}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.9-rc.2_1644008743144_0.731488264990404"},"_hasShrinkwrap":false},"1.0.9-rc.3":{"name":"vue-drawing-canvas","version":"1.0.9-rc.3","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","types":"dist/types/src/VueDrawingCanvas.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"readme":"vue-drawing-canvas
\r\n\r\nVueJS Component for drawing on canvas.\r\n\r\nSupport for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)\r\n\r\n
\r\n\r\nDemo
\r\n\r\n### Vue 3\r\n\r\n[](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)\r\n\r\n### Vue 2\r\n\r\n> Deployed on a nuxt container which have access to terminal\r\n\r\n
\r\n\r\n[](https://codesandbox.io/s/vue-drawing-canvas-p4slb)\r\n\r\n> Notes:\r\n> \r\n> If you're using nuxt.js and receive error `Object(...) is not a function` please refer to this [issue](https://github.com/razztyfication/vue-drawing-canvas/issues/13)\r\n\r\n
\r\n\r\nTable of Contents
\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Props](#props)\r\n - [Watermark Object](#watermark-object)\r\n - [Methods](#methods)\r\n- [Changelog](#changelog)\r\n- [License](#license)\r\n\r\n
\r\n\r\n# Installation\r\nInstall using package manager:\r\n```bash\r\nnpm install --save-dev vue-drawing-canvas\r\n\r\n# or with Vue 2\r\n\r\nnpm install --save-dev vue-drawing-canvas @vue/composition-api\r\n```\r\n\r\nThen add it to your component files\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n
\r\n\r\n# Usage\r\n\r\n## Props\r\n\r\n
\r\n\r\n| Name | Type | Default Value | Description |\r\n| --------------- | :-------------------: | :----------------: | -------------------------------------------------------------------------------------------------------------------------------- |\r\n| canvasId | String | `VueDrawingCanvas` | Specifies your canvas id |\r\n| width | String, Number | `600` | Specifies canvas width |\r\n| height | String, Number | `400` | Specifies canvas height |\r\n| image | String | | Your v-model to get canvas output to an base64 image |\r\n| strokeType | String | `\"dash\"` | Specifies stroke type to draw on canvas.
Accepted value `\"dash\"`, `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"half_triangle\"` |\r\n| fillShape | Boolean | `false` | Specifies if the shape must be filled with the current fill style |\r\n| eraser | Boolean | `false` | Props to change state from drawing to erasing |\r\n| color | String | `\"#000000\"` | Specifies the color, gradient, or pattern to use for the strokes |\r\n| lineWidth | Number | `5` | Sets the thickness of line |\r\n| lock | Boolean | `false` | Lock canvas for drawing |\r\n| backgroundColor | String | `\"#FFFFFF\"` | Set background color on your canvas |\r\n| backgroundImage | String | | Set background image on your canvas
***Be carefull for performance issue when using this props !!*** |\r\n| initialImage | Array | `[]` | Draw strokes and shapes from canvas you've worked before. [Demo](https://codesandbox.io/s/vue-drawing-canvas-107-rc1-dcoiy) |\r\n| additionalImages | Array | `[]` | Accept Array of [watermark](#watermark-object) Object to draw either text or insert multiple image on canvas
***Be carefull for performance issue when using this props !!*** |\r\n| classes | Array, String, Object | | Specifies your own classes to canvas |\r\n| styles | Array, String, Object | | Specifies your own styles to canvas |\r\n| watermark | Object | | Put watermark text/image on your image output
(see details in the next section below) |\r\n| saveAs | String | `\"png\"` | Specifies output type. This props accept either `\"png\"` or `\"jpeg\"` |\r\n\r\n
\r\n\r\n### Watermark Object\r\n\r\n
\r\n\r\n```js\r\n{\r\n // Specifies your watermark type. Type can be either \"Text\" or \"Image\"\r\n // \r\n // type: String\r\n // required: true\r\n // validator: (value) => { return [\"Text\", \"Image\"].includes(value) }\r\n type: \"Text\",\r\n // Specifies your watermark source\r\n // If type is \"Text\" enter your watermark text here\r\n // if type if \"Image\" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file\r\n // \r\n // type: String\r\n // required: true\r\n source: \"Watermark\",\r\n // The x-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n x: 200,\r\n // The y-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n // \r\n // type: Number\r\n // required: true\r\n y: 180,\r\n // Specifies width and height for your watermark image\r\n // \r\n // type: Object\r\n // required: false\r\n imageStyle: {\r\n // The width to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.width\r\n width: 600,\r\n // The height to draw the image in the canvas\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => this.height\r\n height: 400\r\n },\r\n // Specifies text style for your watermark\r\n // \r\n // type: Object\r\n // required: false\r\n fontStyle: {\r\n // The maximum number of pixels wide the text may be once rendered.\r\n // If not specified, there is no limit to the width of the text. \r\n // \r\n // type: Number\r\n // required: false\r\n width: 200,\r\n // Sets the height of text in pixels. Usually this value has same value with font\r\n // \r\n // type: Number\r\n // required: false\r\n // default: () => 20\r\n lineHeight: 48,\r\n // Specifies the color, gradient, or pattern to use for the text\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '#000000'\r\n color: '#FF0000',\r\n // Specifies the current text style to use when drawing text.\r\n // font: '{fontWeight} {fontSize} {fontFamily}'\r\n // \r\n // type: String\r\n // required: false\r\n // default: () => '20px serif'\r\n font: 'bold 48px serif',\r\n // Specifies drawing type to use when drawing text.\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"fill\", \"stroke\"].includes(value) }\r\n // default: () => 'fill'\r\n drawType: 'fill',\r\n // Specifies the current text alignment used when drawing text\r\n // The alignment is relative to the x value\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"left\", \"right\", \"center\", \"start\", \"end\"].includes(value) }\r\n // default: () => 'start'\r\n textAlign: 'left',\r\n // Specifies the current text baseline used when drawing text\r\n // \r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", \"bottom\"].includes(value) }\r\n // default: () => 'alphabetic'\r\n textBaseline: 'top',\r\n // The rotation angle, clockwise in radians\r\n // \r\n // type: Number\r\n // required: false\r\n rotate: 45\r\n }\r\n}\r\n```\r\n\r\n
\r\n\r\n## Methods\r\n\r\n
\r\n\r\n| Method Name | Return Value | Description |\r\n|-----------------------|:-------------------------------:|-------------------------------------------------------|\r\n| getCoordinates(event) | `{ x: 0, y: 0 }` | Get x-axis and y-axis coordinates from current canvas |\r\n| reset() | | Reset current canvas to new state |\r\n| undo() | | Remove last drawing stroke on current canvas |\r\n| redo() | | Re-draw last removed stroke on current canvas |\r\n| redraw() | | Redraw all strokes on current canvas |\r\n| isEmpty() | `true` or `false` | Get current canvas empty state |\r\n| getAllStrokes() | _`Array of strokes and shapes`_ | Get all strokes and shapes from canvas |\r\n\r\n
\r\n\r\n# Changelog\r\n[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)\r\n\r\n
\r\n\r\n# License\r\n[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)\r\n","readmeFilename":"README.md","gitHead":"d497dbc4703cfd851c795e065c3bd90f70e0c1c2","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.9-rc.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-JHQUnQ11u37DwMaLc5/Ztbr/LZqyUuq0TlgxMl2mvL/Hvlo6tBvWmPISfUf4MpaOcQzUcron6/MaTZI8U5thcg==","shasum":"0697400dcbff57c81fd01d89f829f45dae2910de","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.9-rc.3.tgz","fileCount":6,"unpackedSize":39164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiACFhCRA9TVsSAnZWagAACkAP/ib7eeEC7nZEzjInFv/8\nn7NtGGSAS9+/Xayv4GZMaNndj9L6eGSh92dhcAEWLEjw6dq4GU9Glx/vY5B6\nUMvm2gITSOZ2XyQzuT3tPLOKZXJjVvzl3uSpejCR/2TR0zl91d24vg7+phmQ\nFLj3Tj7IrVT+BqIOtZ9fa/o6vD3H2MJV6BLoWi6Az0A3ilj6gtPtvEzbVMZu\nYAS3mo/9r7qhODetJykAm8b+4+Bd3cgOrz9iDqmRYD1rM5OKjOLIq7QYtFFO\nS3lHUm/+5ACO+8x/Trsnl5s2JuWP+APQuqk5yoaKqMd2skboMCupiF8bKNiq\nHBIiFJND8moHAwvcg5FI79MC/n4C6g60OjIjZVg6ikKtvcMDDFkDfioeRQTT\ndXUn2Rl/gxOnKg+NUlvpFi39iyE48tJhQTvSveBs0I4f++TMJ4nfliGIaytK\n67AwHO/p8IKEiZbLDO/ACaVzB0iAfD+5/qkcUjjyo8Xg5UpvM2vFhahJ8NjL\n7V7fHs40DHmygl1ES9EcK2OPPEoUUSzWSfMINRbG5HPOQvtDLlJJXm0PGkoG\nvB5RRNtLUf+E7+O47wRtSrMXKo89Vn98AjtYwm29c/PyjBsIrGKv/knPrM2v\nPvmRqboDMMZaAh8vgjprvrtlh5E86CNvYCIOUfbyPTk4jQ26dUAtjJIjLtik\npkbk\r\n=zxa0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCt+Ds/P5rnh5p/BswgtMecohL1R5UdMh4uaZ4qGW6wsQIhANzlLw3BvmuleiOVT6S9gN7jJBoJgkDSwHDVc7fhqqCm"}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.9-rc.3_1644175713538_0.6937758984777083"},"_hasShrinkwrap":false},"1.0.9":{"name":"vue-drawing-canvas","version":"1.0.9","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","types":"dist/types/src/VueDrawingCanvas.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"gitHead":"d497dbc4703cfd851c795e065c3bd90f70e0c1c2","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.9","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-BDSx5RK+mhUoMWNM69UkPVymIfKslfLoZyVYX14yMjVkuRZ807pXeT21fATbVqLpWYm9cNJL99fYpCpxlICgzA==","shasum":"36491e59cb0caf6fcf3c63f730d5d43765196de1","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.9.tgz","fileCount":6,"unpackedSize":39183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiB+uFCRA9TVsSAnZWagAAFXQP/2U6BAOgXhnzZ+dhTfzY\nF4PNU5HNnclPDSm3wky/OAm+TTFgkEs6H2QOVhWRKt8v2Z5t/kWMHQu5soPp\n9PMQUSE8td8KFrnC44SyyJQbM/nrNfNfXITtnueIYiBdPLvsIzBaO5JVfH53\n/zTMnncwAvNaCHz1w6GMYE+QQ74wxR7S16un5QpOKz3bShVn/K0JtkNgbnR8\nR2UAz7ykfflVcAMDqDolR0tUe116MeHqoDnLqLRwzpr8IcZ6wBlxVgiH8Inm\n9uAd9PKNjb2Dh+yLGNIe89thc6KRB2SrAb8MiPR9miwm58n6213YIhjwDgjG\n+60o88MQ0bsnNZdpod2v1LMGTHP801/Dl1Dvgu7P8F3m9TyzDAnh/wVyfDwV\nYwLvn+i3RULxD9cTZ7RmzcuzwGcOahzXsgFvMWnO/KNg5fJOevN8ZcoD7oV3\nQRFVA3QVJUtokV3hbO4B7KUwZoTFicoAlh1T4PSgP5NgLSV/YpE769YDEpMq\nry5ELLw6vm7v9crXy4B+fWznxgyBgkumOgm8kCc0k/9mhvpa2jPguIoYdVfn\npIEznKeXPty+SmVCmc2fhmV+Aert6I7esVung94GfwaXPBbLIUAsQJNv72eE\n+6Iqwj2H2zlpWrNtwHx9Y1DO5mX4X4oNyqlbzyBd/7qQKbIbAZKl0NcYIPAO\neUFz\r\n=nPia\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCj1/eilJtTDFQWtQcC5luyG45+wEDlDVo77Yw52oltgIhAMNB9ld47hw9nGGP3usNbjKUO8G91RsIbSXGXD48YgJR"}]},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.9_1644686213784_0.5240554707887974"},"_hasShrinkwrap":false},"1.0.10-rc.1":{"name":"vue-drawing-canvas","version":"1.0.10-rc.1","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","types":"dist/types/src/VueDrawingCanvas.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"readme":"vue-drawing-canvas
\r\n\r\nVueJS Component for drawing on canvas.\r\n\r\nSupport for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)\r\n\r\n
\r\n\r\nDemo
\r\n\r\n### Vue 3\r\n\r\n[](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)\r\n\r\n### Vue 2\r\n\r\n> Deployed on a nuxt container which have access to terminal\r\n\r\n
\r\n\r\n[](https://codesandbox.io/s/vue-drawing-canvas-p4slb)\r\n\r\n> Note:\r\n> If you're using nuxt.js and receive error `Object(...) is not a function` please refer to this [issue](https://github.com/razztyfication/vue-drawing-canvas/issues/13)\r\n\r\n
\r\n\r\nTable of Contents
\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Props](#props)\r\n - [Watermark Object](#watermark-object)\r\n - [Methods](#methods)\r\n- [Changelog](#changelog)\r\n- [License](#license)\r\n\r\n
\r\n\r\n# Installation\r\n\r\nInstall using package manager:\r\n\r\n```bash\r\nnpm install --save-dev vue-drawing-canvas\r\n\r\n# or with Vue 2\r\n\r\nnpm install --save-dev vue-drawing-canvas @vue/composition-api\r\n```\r\n\r\nThen add it to your component files\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n
\r\n\r\n# Usage\r\n\r\n## Props\r\n\r\n
\r\n\r\n| Name | Type | Default Value | Description |\r\n| ---------------- | :-------------------: | :----------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\r\n| canvasId | String | `VueDrawingCanvas` | Specifies your canvas id |\r\n| width | String, Number | `600` | Specifies canvas width |\r\n| height | String, Number | `400` | Specifies canvas height |\r\n| image | String | | Your v-model to get canvas output to an base64 image |\r\n| strokeType | String | `\"dash\"` | Specifies stroke type to draw on canvas.
Accepted value `\"dash\"`, `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"half_triangle\"` |\r\n| fillShape | Boolean | `false` | Specifies if the shape must be filled with the current fill style |\r\n| eraser | Boolean | `false` | Props to change state from drawing to erasing |\r\n| color | String | `\"#000000\"` | Specifies the color, gradient, or pattern to use for the strokes |\r\n| lineWidth | Number | `5` | Sets the thickness of line |\r\n| lock | Boolean | `false` | Lock canvas for drawing |\r\n| backgroundColor | String | `\"#FFFFFF\"` | Set background color on your canvas |\r\n| backgroundImage | String | | Set background image on your canvas
**_Be carefull for performance issue when using this props !!_** |\r\n| initialImage | Array | `[]` | Draw strokes and shapes from canvas you've worked before. [Demo](https://codesandbox.io/s/vue-drawing-canvas-107-rc1-dcoiy) |\r\n| additionalImages | Array | `[]` | Accept Array of [watermark](#watermark-object) Object to draw either text or insert multiple image on canvas
**_Be carefull for performance issue when using this props !!_** |\r\n| classes | Array, String, Object | | Specifies your own classes to canvas |\r\n| styles | Array, String, Object | | Specifies your own styles to canvas |\r\n| watermark | Object | | Put watermark text/image on your image output
(see details in the next section below) |\r\n| saveAs | String | `\"png\"` | Specifies output type. This props accept either `\"png\"` or `\"jpeg\"` |\r\n\r\n
\r\n\r\n### Watermark Object\r\n\r\n
\r\n\r\n```js\r\n{\r\n // Specifies your watermark type. Type can be either \"Text\" or \"Image\"\r\n //\r\n // type: String\r\n // required: true\r\n // validator: (value) => { return [\"Text\", \"Image\"].includes(value) }\r\n type: \"Text\",\r\n // Specifies your watermark source\r\n // If type is \"Text\" enter your watermark text here\r\n // if type if \"Image\" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file\r\n //\r\n // type: String\r\n // required: true\r\n source: \"Watermark\",\r\n // The x-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n //\r\n // type: Number\r\n // required: true\r\n x: 200,\r\n // The y-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n //\r\n // type: Number\r\n // required: true\r\n y: 180,\r\n // Specifies width and height for your watermark image\r\n //\r\n // type: Object\r\n // required: false\r\n imageStyle: {\r\n // The width to draw the image in the canvas\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => this.width\r\n width: 600,\r\n // The height to draw the image in the canvas\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => this.height\r\n height: 400\r\n },\r\n // Specifies text style for your watermark\r\n //\r\n // type: Object\r\n // required: false\r\n fontStyle: {\r\n // The maximum number of pixels wide the text may be once rendered.\r\n // If not specified, there is no limit to the width of the text.\r\n //\r\n // type: Number\r\n // required: false\r\n width: 200,\r\n // Sets the height of text in pixels. Usually this value has same value with font\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => 20\r\n lineHeight: 48,\r\n // Specifies the color, gradient, or pattern to use for the text\r\n //\r\n // type: String\r\n // required: false\r\n // default: () => '#000000'\r\n color: '#FF0000',\r\n // Specifies the current text style to use when drawing text.\r\n // font: '{fontWeight} {fontSize} {fontFamily}'\r\n //\r\n // type: String\r\n // required: false\r\n // default: () => '20px serif'\r\n font: 'bold 48px serif',\r\n // Specifies drawing type to use when drawing text.\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"fill\", \"stroke\"].includes(value) }\r\n // default: () => 'fill'\r\n drawType: 'fill',\r\n // Specifies the current text alignment used when drawing text\r\n // The alignment is relative to the x value\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"left\", \"right\", \"center\", \"start\", \"end\"].includes(value) }\r\n // default: () => 'start'\r\n textAlign: 'left',\r\n // Specifies the current text baseline used when drawing text\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", \"bottom\"].includes(value) }\r\n // default: () => 'alphabetic'\r\n textBaseline: 'top',\r\n // The rotation angle, clockwise in radians\r\n //\r\n // type: Number\r\n // required: false\r\n rotate: 45\r\n }\r\n}\r\n```\r\n\r\n
\r\n\r\n## Methods\r\n\r\n
\r\n\r\n| Method Name | Return Value | Description |\r\n| --------------------- | :-----------------------------: | ----------------------------------------------------- |\r\n| getCoordinates(event) | `{ x: 0, y: 0 }` | Get x-axis and y-axis coordinates from current canvas |\r\n| reset() | | Reset current canvas to new state |\r\n| undo() | | Remove last drawing stroke on current canvas |\r\n| redo() | | Re-draw last removed stroke on current canvas |\r\n| redraw() | | Redraw all strokes on current canvas |\r\n| isEmpty() | `true` or `false` | Get current canvas empty state |\r\n| getAllStrokes() | _`Array of strokes and shapes`_ | Get all strokes and shapes from canvas |\r\n\r\n
\r\n\r\n# Changelog\r\n\r\n[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)\r\n\r\n
\r\n\r\n# License\r\n\r\n[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)\r\n","readmeFilename":"README.md","gitHead":"ce9d15a773540e252d37b75b381478dfb400670b","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.10-rc.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-tpIideVqd1mJe6u1BsH2bz1XI2JW0f2FfgWXl6OrxG7jRQ+sLJZnhmlazEXUXKn6T6RThqwbNTkvNCLGPY3Ueg==","shasum":"5a2e11a1789d192aedcf4165daccf593951eba11","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.10-rc.1.tgz","fileCount":6,"unpackedSize":40699,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5orLPof4IQTvH5zCemVpMrQo3MceAmQDq6suyE9tshAIhANOTcRF1Gd2Op3Fey0WwcMAnmIBrzifOBl/gHS5bvnI1"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiU1EFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobaQ//dGNGTT7RngdVoIw92vDy9rZWNYJEQplMOWEzZfn4/gXOu7ct\r\n7Kr22SdRgQMLHOkFdM85nE8kk1ry+q+zIUnndn8gdhlJUmMcbSMlk2SJdeOY\r\nlb1wv3CltkAoLJN4P31BMEN7woyTWsLpdBj21enK2iKdegcxljGBEP+LbhTQ\r\naWigNXBt1eLT238eHmJU3oc1xF0ILsowwYRvAv+RM0n3wJzWVbQ/LoLlu/Fx\r\nf9XfQrc5/EUsY6nz7SOykLxRLlK8JJfaqTg+UqaeHFmshercEZ9JhZ+mDbru\r\ntLVsQELd64rK1HFbBCOvMW+vH3rnlK+HHbdHOAxYBqqXlJcPQq53vF6MlXki\r\nBcWTRD/xswcc2Ax65PTLzWvA20v+9lN2KYv0K9hojQUGVduQLwcGA/C4c/Mj\r\negoDbEdc/uZZnLtQwQvkvcs4Cu3b6dGviE0JhzQEpDaOCqw4+ADct/RUDSJl\r\nB3IFHCFZn56l2WNcAlOZTgSThKiJxTgFO1zf7mW1VgwubclX5b3qpVOxF3ey\r\nd0cBnyWrld05LsxKNtVsov1y2ikB/dAsESjvuYKP+yKehTdSTmOvQYp0wAye\r\nxq4ymJmxm4TtY6i+mzp0OHT9c65JXwdrMwv6wU4MZtgWKjq58rw2V1n81U2Z\r\n5i4sNQ+yqMluqgNyE2eHLjhhAwNpedyOM2Y=\r\n=HU5T\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.10-rc.1_1649627397677_0.4100410216807229"},"_hasShrinkwrap":false},"1.0.10-rc.2":{"name":"vue-drawing-canvas","version":"1.0.10-rc.2","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","types":"dist/types/src/VueDrawingCanvas.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"readme":"vue-drawing-canvas
\r\n\r\nVueJS Component for drawing on canvas.\r\n\r\nSupport for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)\r\n\r\n
\r\n\r\nDemo
\r\n\r\n### Vue 3\r\n\r\n[](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)\r\n\r\n### Vue 2\r\n\r\n> Deployed on a nuxt container which have access to terminal\r\n\r\n
\r\n\r\n[](https://codesandbox.io/s/vue-drawing-canvas-p4slb)\r\n\r\n> Note:\r\n> If you're using nuxt.js and receive error `Object(...) is not a function` please refer to this [issue](https://github.com/razztyfication/vue-drawing-canvas/issues/13)\r\n\r\n
\r\n\r\nTable of Contents
\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Props](#props)\r\n - [Watermark Object](#watermark-object)\r\n - [Methods](#methods)\r\n- [Changelog](#changelog)\r\n- [License](#license)\r\n\r\n
\r\n\r\n# Installation\r\n\r\nInstall using package manager:\r\n\r\n```bash\r\nnpm install --save-dev vue-drawing-canvas\r\n\r\n# or with Vue 2\r\n\r\nnpm install --save-dev vue-drawing-canvas @vue/composition-api\r\n```\r\n\r\nThen add it to your component files\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n
\r\n\r\n# Usage\r\n\r\n## Props\r\n\r\n
\r\n\r\n| Name | Type | Default Value | Description |\r\n| ---------------- | :-------------------: | :----------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| canvasId | String | `VueDrawingCanvas` | Specifies your canvas id |\r\n| width | String, Number | `600` | Specifies canvas width |\r\n| height | String, Number | `400` | Specifies canvas height |\r\n| image | String | | Your v-model to get canvas output to an base64 image |\r\n| strokeType | String | `\"dash\"` | Specifies stroke type to draw on canvas.
Accepted value `\"dash\"`, `\"line\"`, `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"half_triangle\"` |\r\n| fillShape | Boolean | `false` | Specifies if the shape must be filled with the current fill style |\r\n| eraser | Boolean | `false` | Props to change state from drawing to erasing |\r\n| color | String | `\"#000000\"` | Specifies the color, gradient, or pattern to use for the strokes |\r\n| lineWidth | Number | `5` | Sets the thickness of line |\r\n| lineCap | String | `\"round\"` | Determines the shape used to draw the end points of line.
Accepted value `\"round\"`, `\"square\"`, `\"butt\"`.
Refer to [this site](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap) for more information. |\r\n| lineJoin | String | `\"miter\"` | determines the shape used to join two line segments where they meet.
Accepted value `\"round\"`, `\"miter\"`, `\"square\"`.
Refer to [this site](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin) for more information. |\r\n| lock | Boolean | `false` | Lock canvas for drawing |\r\n| backgroundColor | String | `\"#FFFFFF\"` | Set background color on your canvas |\r\n| backgroundImage | String | | Set background image on your canvas
**_Be carefull for performance issue when using this props !!_** |\r\n| initialImage | Array | `[]` | Draw strokes and shapes from canvas you've worked before. [Demo](https://codesandbox.io/s/vue-drawing-canvas-107-rc1-dcoiy) |\r\n| additionalImages | Array | `[]` | Accept Array of [watermark](#watermark-object) Object to draw either text or insert multiple image on canvas
**_Be carefull for performance issue when using this props !!_** |\r\n| classes | Array, String, Object | | Specifies your own classes to canvas |\r\n| styles | Array, String, Object | | Specifies your own styles to canvas |\r\n| watermark | Object | | Put watermark text/image on your image output
(see details in the next section below) |\r\n| saveAs | String | `\"png\"` | Specifies output type. This props accept either `\"png\"` or `\"jpeg\"` |\r\n\r\n
\r\n\r\n### Watermark Object\r\n\r\n
\r\n\r\n```js\r\n{\r\n // Specifies your watermark type. Type can be either \"Text\" or \"Image\"\r\n //\r\n // type: String\r\n // required: true\r\n // validator: (value) => { return [\"Text\", \"Image\"].includes(value) }\r\n type: \"Text\",\r\n // Specifies your watermark source\r\n // If type is \"Text\" enter your watermark text here\r\n // if type if \"Image\" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file\r\n //\r\n // type: String\r\n // required: true\r\n source: \"Watermark\",\r\n // The x-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n //\r\n // type: Number\r\n // required: true\r\n x: 200,\r\n // The y-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n //\r\n // type: Number\r\n // required: true\r\n y: 180,\r\n // Specifies width and height for your watermark image\r\n //\r\n // type: Object\r\n // required: false\r\n imageStyle: {\r\n // The width to draw the image in the canvas\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => this.width\r\n width: 600,\r\n // The height to draw the image in the canvas\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => this.height\r\n height: 400\r\n },\r\n // Specifies text style for your watermark\r\n //\r\n // type: Object\r\n // required: false\r\n fontStyle: {\r\n // The maximum number of pixels wide the text may be once rendered.\r\n // If not specified, there is no limit to the width of the text.\r\n //\r\n // type: Number\r\n // required: false\r\n width: 200,\r\n // Sets the height of text in pixels. Usually this value has same value with font\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => 20\r\n lineHeight: 48,\r\n // Specifies the color, gradient, or pattern to use for the text\r\n //\r\n // type: String\r\n // required: false\r\n // default: () => '#000000'\r\n color: '#FF0000',\r\n // Specifies the current text style to use when drawing text.\r\n // font: '{fontWeight} {fontSize} {fontFamily}'\r\n //\r\n // type: String\r\n // required: false\r\n // default: () => '20px serif'\r\n font: 'bold 48px serif',\r\n // Specifies drawing type to use when drawing text.\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"fill\", \"stroke\"].includes(value) }\r\n // default: () => 'fill'\r\n drawType: 'fill',\r\n // Specifies the current text alignment used when drawing text\r\n // The alignment is relative to the x value\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"left\", \"right\", \"center\", \"start\", \"end\"].includes(value) }\r\n // default: () => 'start'\r\n textAlign: 'left',\r\n // Specifies the current text baseline used when drawing text\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", \"bottom\"].includes(value) }\r\n // default: () => 'alphabetic'\r\n textBaseline: 'top',\r\n // The rotation angle, clockwise in radians\r\n //\r\n // type: Number\r\n // required: false\r\n rotate: 45\r\n }\r\n}\r\n```\r\n\r\n
\r\n\r\n## Methods\r\n\r\n
\r\n\r\n| Method Name | Return Value | Description |\r\n| --------------------- | :-----------------------------: | ----------------------------------------------------- |\r\n| getCoordinates(event) | `{ x: 0, y: 0 }` | Get x-axis and y-axis coordinates from current canvas |\r\n| reset() | | Reset current canvas to new state |\r\n| undo() | | Remove last drawing stroke on current canvas |\r\n| redo() | | Re-draw last removed stroke on current canvas |\r\n| redraw() | | Redraw all strokes on current canvas |\r\n| isEmpty() | `true` or `false` | Get current canvas empty state |\r\n| getAllStrokes() | _`Array of strokes and shapes`_ | Get all strokes and shapes from canvas |\r\n\r\n
\r\n\r\n# Changelog\r\n\r\n[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)\r\n\r\n
\r\n\r\n# License\r\n\r\n[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)\r\n","readmeFilename":"README.md","gitHead":"ce9d15a773540e252d37b75b381478dfb400670b","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.10-rc.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-HoNXXgsbJGEuTT2Bp16Rq1GhoTlAaAYIGJN4Z3tDQq8rBglZRKUObyuVM4F2xP0Ps8Ofbj3LPpKNPAceueryWQ==","shasum":"75a195a63b97a26759cb8d38f31f16bf816bd204","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.10-rc.2.tgz","fileCount":6,"unpackedSize":44217,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0auYMQKqmhl5dZtsdTVbc4Jt5E/3TO8VZfK8Kjc9BnQIhANAtUGiHY5D9s3VyF0gDU8Aca63e73NU6w4HA1v3tD7I"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWv7xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKixAAhJvgWeOjl/s3sWnG5LImmoj/wdedGNzkxw+baCkkx2BPlZs5\r\npYJDzpL+oqeHLfk0lz52HE7FfNNpqIBK8B5niwJNaSTvj+A3rQqsLclY9IMO\r\nN9YkSddv0qsQmAa2zIbI47rEc3l8FAuFGFknbFD3MVE2HSHl6xKJVu07QC+s\r\n53Lg+cW++RwDyRazqIPZ5iRQ7W0eDxrJZYeyKwiJ1iY7zKZgrUgI+DdJ54lZ\r\nLx21G5QRcfHIMjqkwEKu5x7+yZAOd19Eh+Qa9tfCnTMaEQSCclJ7yOyD5tPC\r\nzYF0v1z1KaThRz9lgpIEbU92872NJeGcVk4zaDcOpFB3txRi9iHKOJq2BUfX\r\nDkScVrZN5ife6N2Y2wyCKc46l6omsRCXOnqOuhH4wqM3t65N7D2n0kJJzZ6d\r\np6F2bPmVIihz7diKiWfMrh7eTU9tZYCPdSXWi0ohH+kjwCdUqHQmLFyPE6uN\r\nFDO+WSBWDrjloYF/LrMe95RXETzJaVW2TGJjqQ/QmQC7oRBLGZYknlf90DBD\r\nOi6cMi4ecY5hTT6VWkK70bE5WTcmRXOjmQIo4Y0lQZdPW3qRbzMUuOkur9Rb\r\nbCUrFYiNRLqCNWof6RWymrXXszk22o/IN+nEWAEN2EpIQ40nKK6SEfpwnPGT\r\nBwUUstJV/GW9VkkfJC4l6if/tpDhM7rCVRw=\r\n=Juju\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.10-rc.2_1650130673543_0.18607029006651965"},"_hasShrinkwrap":false},"1.0.10":{"name":"vue-drawing-canvas","version":"1.0.10","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","types":"dist/types/src/VueDrawingCanvas.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"gitHead":"ce9d15a773540e252d37b75b381478dfb400670b","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.10","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-PMAXThAhJFKxls07fKEheNnYLTexlKHWBOMtwlZlOX5Li3fP6wFaPS09g46VDDgRfw8GWIanfeehrVLwa2dcmg==","shasum":"71dce11e605bfae6bcd29c2be6e89937b9d13cff","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.10.tgz","fileCount":6,"unpackedSize":44270,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLL6kX6uV6KwBCf8ebL7zbTxoBQuDAlwupo05PGCO3ZgIgewm+1qC4IlVlY92nKdNWoA2uMENEAsYIJgPguHoFUzQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXC13ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobDA/+LxIgxil29zBwljNxO9P1No5NmJ9Cohe0TKNM31YH2D6SjF7I\r\nEyoA4I9cuH2xF178i9lml8d/oVNgA1FHfaE/ZzGxxIAKQJWKzSv3XmAVsU2V\r\nIbFHKZD0FPWRgV5NvstAe/u2PM6rmP2byEM9NoJVwoDSXdSC+PTz8vbZ7LmN\r\nuMyhQF87eWb4U9Mq1Ugwgypneq+QKPVRnyJCk5oCvIynf32tYnLpihVuRd9y\r\nmVvpZMCEdQFuCUn/YUdgRaYgO48fOoHTXeiFotTMBsCVcSL1OczNj6k3QhJ9\r\ndUo7kWbWj/wKc50TamtLh6mlgzJVEJs9+bLuOj18yA6XDdDXEXGpO/C5la7K\r\ntGcDHYGkwAmpkXN7D6DWz7zPRnqgmcNWQW1cArq8Fnp2NyPJ7B24JwJrKe36\r\nNn214IRtnQMMLdSAlv/TwRx8YWBT+G8pfeb4OfEih9pWSjT/ly1IrgC2//SI\r\nasXBlym/H1lH/EAmar5Pz/5xAanEiv2xJHTvzpMCI8nLiFU+/2obL47mZibg\r\nSrmjcCAjReRakZ+cpLhJGsU46s2K4qxBoSBiHWJUGb3YACFQcy191mr4lpml\r\nD65Co62OryV/qojORFzeJlEPawzdRT0IjFuKcNwlWJ3WoNS6zL20oWfdgD4D\r\nFvvOK1gntY8FKevJte2+evStLSsvqrKdA64=\r\n=gj6b\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.10_1650208119540_0.7078973516999909"},"_hasShrinkwrap":false},"1.0.11-rc.1":{"name":"vue-drawing-canvas","version":"1.0.11-rc.1","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","types":"dist/types/src/VueDrawingCanvas.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"readme":"vue-drawing-canvas
\r\n\r\nVueJS Component for drawing on canvas.\r\n\r\nSupport for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)\r\n\r\n
\r\n\r\nDemo
\r\n\r\n### Vue 3\r\n\r\n[](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)\r\n\r\n### Vue 2\r\n\r\n> Deployed on a nuxt container which have access to terminal\r\n\r\n
\r\n\r\n[](https://codesandbox.io/s/vue-drawing-canvas-p4slb)\r\n\r\n> Note:\r\n> If you're using nuxt.js and receive error `Object(...) is not a function` please refer to this [issue](https://github.com/razztyfication/vue-drawing-canvas/issues/13)\r\n\r\n
\r\n\r\nTable of Contents
\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Props](#props)\r\n - [Watermark Object](#watermark-object)\r\n - [Methods](#methods)\r\n- [Changelog](#changelog)\r\n- [License](#license)\r\n\r\n
\r\n\r\n# Installation\r\n\r\nInstall using package manager:\r\n\r\n```bash\r\nnpm install --save-dev vue-drawing-canvas\r\n\r\n# or with Vue 2\r\n\r\nnpm install --save-dev vue-drawing-canvas @vue/composition-api\r\n```\r\n\r\nThen add it to your component files\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n
\r\n\r\n# Usage\r\n\r\n## Props\r\n\r\n
\r\n\r\n| Name | Type | Default Value | Description |\r\n| ---------------- | :-------------------: | :----------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| canvasId | String | `VueDrawingCanvas` | Specifies your canvas id |\r\n| width | String, Number | `600` | Specifies canvas width |\r\n| height | String, Number | `400` | Specifies canvas height |\r\n| image | String | | Your v-model to get canvas output to an base64 image |\r\n| strokeType | String | `\"dash\"` | Specifies stroke type to draw on canvas.
Accepted value `\"dash\"`, `\"line\"`, `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"half_triangle\"` |\r\n| fillShape | Boolean | `false` | Specifies if the shape must be filled with the current fill style |\r\n| eraser | Boolean | `false` | Props to change state from drawing to erasing |\r\n| color | String | `\"#000000\"` | Specifies the color, gradient, or pattern to use for the strokes |\r\n| lineWidth | Number | `5` | Sets the thickness of line |\r\n| lineCap | String | `\"round\"` | Determines the shape used to draw the end points of line.
Accepted value `\"round\"`, `\"square\"`, `\"butt\"`.
Refer to [this site](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap) for more information. |\r\n| lineJoin | String | `\"miter\"` | determines the shape used to join two line segments where they meet.
Accepted value `\"round\"`, `\"miter\"`, `\"square\"`.
Refer to [this site](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin) for more information. |\r\n| lock | Boolean | `false` | Lock canvas for drawing |\r\n| backgroundColor | String | `\"#FFFFFF\"` | Set background color on your canvas |\r\n| backgroundImage | String | | Set background image on your canvas
**_Be carefull for performance issue when using this props !!_** |\r\n| initialImage | Array | `[]` | Draw strokes and shapes from canvas you've worked before. [Demo](https://codesandbox.io/s/vue-drawing-canvas-107-rc1-dcoiy) |\r\n| additionalImages | Array | `[]` | Accept Array of [watermark](#watermark-object) Object to draw either text or insert multiple image on canvas
**_Be carefull for performance issue when using this props !!_** |\r\n| classes | Array, String, Object | | Specifies your own classes to canvas |\r\n| styles | Array, String, Object | | Specifies your own styles to canvas |\r\n| watermark | Object | | Put watermark text/image on your image output
(see details in the next section below) |\r\n| saveAs | String | `\"png\"` | Specifies output type. This props accept either `\"png\"` or `\"jpeg\"` |\r\n| outputWidth | Number | `this.width` | Specifies image output width, if `undefined` then canvas width will be used |\r\n| outputHeight | Number | `this.height` | Specifies image output height, if `undefined` then canvas height will be used |\r\n\r\n
\r\n\r\n### Watermark Object\r\n\r\n
\r\n\r\n```js\r\n{\r\n // Specifies your watermark type. Type can be either \"Text\" or \"Image\"\r\n //\r\n // type: String\r\n // required: true\r\n // validator: (value) => { return [\"Text\", \"Image\"].includes(value) }\r\n type: \"Text\",\r\n // Specifies your watermark source\r\n // If type is \"Text\" enter your watermark text here\r\n // if type if \"Image\" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file\r\n //\r\n // type: String\r\n // required: true\r\n source: \"Watermark\",\r\n // The x-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n //\r\n // type: Number\r\n // required: true\r\n x: 200,\r\n // The y-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n //\r\n // type: Number\r\n // required: true\r\n y: 180,\r\n // Specifies width and height for your watermark image\r\n //\r\n // type: Object\r\n // required: false\r\n imageStyle: {\r\n // The width to draw the image in the canvas\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => this.width\r\n width: 600,\r\n // The height to draw the image in the canvas\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => this.height\r\n height: 400\r\n },\r\n // Specifies text style for your watermark\r\n //\r\n // type: Object\r\n // required: false\r\n fontStyle: {\r\n // The maximum number of pixels wide the text may be once rendered.\r\n // If not specified, there is no limit to the width of the text.\r\n //\r\n // type: Number\r\n // required: false\r\n width: 200,\r\n // Sets the height of text in pixels. Usually this value has same value with font\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => 20\r\n lineHeight: 48,\r\n // Specifies the color, gradient, or pattern to use for the text\r\n //\r\n // type: String\r\n // required: false\r\n // default: () => '#000000'\r\n color: '#FF0000',\r\n // Specifies the current text style to use when drawing text.\r\n // font: '{fontWeight} {fontSize} {fontFamily}'\r\n //\r\n // type: String\r\n // required: false\r\n // default: () => '20px serif'\r\n font: 'bold 48px serif',\r\n // Specifies drawing type to use when drawing text.\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"fill\", \"stroke\"].includes(value) }\r\n // default: () => 'fill'\r\n drawType: 'fill',\r\n // Specifies the current text alignment used when drawing text\r\n // The alignment is relative to the x value\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"left\", \"right\", \"center\", \"start\", \"end\"].includes(value) }\r\n // default: () => 'start'\r\n textAlign: 'left',\r\n // Specifies the current text baseline used when drawing text\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", \"bottom\"].includes(value) }\r\n // default: () => 'alphabetic'\r\n textBaseline: 'top',\r\n // The rotation angle, clockwise in radians\r\n //\r\n // type: Number\r\n // required: false\r\n rotate: 45\r\n }\r\n}\r\n```\r\n\r\n
\r\n\r\n## Methods\r\n\r\n
\r\n\r\n| Method Name | Return Value | Description |\r\n| --------------------- | :-----------------------------: | ----------------------------------------------------- |\r\n| getCoordinates(event) | `{ x: 0, y: 0 }` | Get x-axis and y-axis coordinates from current canvas |\r\n| reset() | | Reset current canvas to new state |\r\n| undo() | | Remove last drawing stroke on current canvas |\r\n| redo() | | Re-draw last removed stroke on current canvas |\r\n| redraw() | | Redraw all strokes on current canvas |\r\n| isEmpty() | `true` or `false` | Get current canvas empty state |\r\n| getAllStrokes() | _`Array of strokes and shapes`_ | Get all strokes and shapes from canvas |\r\n\r\n
\r\n\r\n# Changelog\r\n\r\n[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)\r\n\r\n
\r\n\r\n# License\r\n\r\n[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)\r\n","readmeFilename":"README.md","gitHead":"46da620315e3bb9e286cb43a06c9df045d3b1289","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.11-rc.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Byr9BZsJOM/85CJ7CHvyE+ijVNKVs+ztUlrPCcm/PKdkR2PZULSsApO5p3D7Fe8dsIR0lGzwBAwpTgTvUNNkng==","shasum":"e6516e9cfb9eae96baae6c2614d8f2c99e290b9b","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.11-rc.1.tgz","fileCount":6,"unpackedSize":46957,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwHWZfqW3rmzF9vRHKfC3Y4JN9iUMBK8ALAqQ5zJUO+AIhALm87wBoa//WT3G70Lwigvdutk1tFhExGK2ZascGeorv"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaW3CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoc3A//d67OFYHI16tiZiFQjbGUcfxVQuF2+SlQqGcbHz35e7I03dey\r\naXrC6wYE+goiuwYXF6jJlpg3v7Or1iGIFYtoNMum7izTNEimML92uEZOIDXg\r\nZ2einu0VGCFqgEaDHgciPogOHnKCdoaWEbIqKy1RqzYneRDr+HOxrfB8PS33\r\npekhpwJChE4t0HIVh+O5TFGseqvXdo0kjRdd7/MfEMQ/D4WbGcwMO1Bbm4og\r\neAhagf5caQ31MC3rl2GyMEzG/A8+NdkE2a2DHrxsNaF5w4isM17N8qNOX8YB\r\nkJzmQNJqXQL3NQFfqJ7nsf+jYmqBViIfjknhwQ/K3qDBsy9cuo4mVld9AKHe\r\nbnGeyBBXWkc0ehc9zBwwpAu90s3BlzXWwtkW4h/nXBmPFjC1WWCflGYhPyb+\r\nGUAxTJYwe4LYictBtZMwTwYFaJ/gbRbHMnrmOwGUBFyCVZbFtiZ7ZK2yjcy4\r\nx9nqt6nhuYbv+f+mGZ8rTHgX1xHSSi/P51wV94q3djVXBdfuBDXkjvfPZuQs\r\n3KlW2OccCErhfsZOSDPTGsvS0xgcAiyP/7wzVQIlGspk3nU5TLnMEitlwDth\r\ncRWSCpS5GmWADwBCQxOIJLnxOSavweGOtaRfQihf556qsrh5FRMxLyjJ5LZE\r\njL7nyXD5ZGSEUmmjo8p/wF6kDR89a0x9e9o=\r\n=aSHr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.11-rc.1_1651076546272_0.9084803298102964"},"_hasShrinkwrap":false},"1.0.11":{"name":"vue-drawing-canvas","version":"1.0.11","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","types":"dist/types/src/VueDrawingCanvas.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"gitHead":"8ccb4ee19f9deafa976821ac236fe1715f0edfc1","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.11","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-FEAeZjIHlOj/9nlfrmRHTV3zT2LWIBXLvRUkmnX60v2nrdMB/tktWcfTvtTNaQ+8GDufH4GM639C3kKTgDsUqg==","shasum":"7f7ca20d068fa679150dc1b775cac7cc43583579","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.11.tgz","fileCount":6,"unpackedSize":46952,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEdDzmVgtKwAuvPa3m0IXRvGbh2FHcNu9saKnAUT395RAiEAj9BNzEOCcP0UTWefxN74J5UZzR4tRkUOcdIaej7OfaA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaW7CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzBw//cQqKvDZnn8d2yvOXpfxnULtJKRg0MWGu8uSGVEDSySYSXB+K\r\nRTWelI9VBGiAKsncjifwo16rlDWYf6vNECgomQy5JODTur3O2DMxOtwguX0U\r\nwTItnqpAOG5np34nEI8Ms644M8e/EcupPw4y85Oj//BpzUgHXa4zsoxiLeeP\r\njP6yiZ7IH4FHFmpkGPkA5P1KEq5y9TBlbqg4BHm1VESoXQAS7RpStAgG0aoU\r\nj8B/iHsfF+YsoVjE18KehJ5eqzw0RZM456HvpISpYhMEmevEqyHCZgcHDHhn\r\nUOh5/EfgHMzAJBAMj5zzqP0TL+UEPB7Xi8as7nFICdP/g+Xd7UF4HJbLahFd\r\nBqFg9ih36Mvi6kcXsE84i/y22cDJeCwlzXqKilF03CbYlhU9E5Y3G3q5x9u/\r\nFgczFfPDwn6J7eniYIZN0vL1N9THCQaSn78S3BBDH0icGJeK5r+MsGkh+veX\r\naUUXYO1lhLz1+jvGQMK4LrbGdpRduu0Cqaao+I/qr3CdYmXEaPPRed8I01nn\r\n1l7XR0fRrWjZ8zBgeqseQRCt1EsSDaGzsOnJkM58NLJkkI80Eu2YTiTWK4f4\r\n8INiLNh/toviJRuunf2UnaWZh5I9/XCQiv+cCBAgaRA1v5AevzSYMYJ2Rk0O\r\nZ/PCIGyy1+PRE3lEqrQD9lKMEJz9agW7Bo4=\r\n=jUJs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.11_1651076802413_0.22798975499853857"},"_hasShrinkwrap":false},"1.0.1-2.rc-1":{"name":"vue-drawing-canvas","version":"1.0.1-2.rc-1","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","types":"dist/types/src/VueDrawingCanvas.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"readme":"vue-drawing-canvas
\r\n\r\nVueJS Component for drawing on canvas.\r\n\r\nSupport for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)\r\n\r\n
\r\n\r\nDemo
\r\n\r\n### Vue 3\r\n\r\n[](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)\r\n\r\n### Vue 2\r\n\r\n> Deployed on a nuxt container which have access to terminal\r\n\r\n
\r\n\r\n[](https://codesandbox.io/s/vue-drawing-canvas-p4slb)\r\n\r\n> Note:\r\n> If you're using nuxt.js and receive error `Object(...) is not a function` please refer to this [issue](https://github.com/razztyfication/vue-drawing-canvas/issues/13)\r\n\r\n
\r\n\r\nTable of Contents
\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Props](#props)\r\n - [Watermark Object](#watermark-object)\r\n - [Methods](#methods)\r\n- [Changelog](#changelog)\r\n- [License](#license)\r\n\r\n
\r\n\r\n# Installation\r\n\r\nInstall using package manager:\r\n\r\n```bash\r\nnpm install --save-dev vue-drawing-canvas\r\n\r\n# or with Vue 2\r\n\r\nnpm install --save-dev vue-drawing-canvas @vue/composition-api\r\n```\r\n\r\nThen add it to your component files\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n
\r\n\r\n# Usage\r\n\r\n## Props\r\n\r\n
\r\n\r\n| Name | Type | Default Value | Description |\r\n| ---------------- | :-------------------: | :----------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| canvasId | String | `VueDrawingCanvas` | Specifies your canvas id |\r\n| width | String, Number | `600` | Specifies canvas width |\r\n| height | String, Number | `400` | Specifies canvas height |\r\n| image | String | | Your v-model to get canvas output to an base64 image |\r\n| strokeType | String | `\"dash\"` | Specifies stroke type to draw on canvas.
Accepted value `\"dash\"`, `\"line\"`, `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"half_triangle\"` |\r\n| fillShape | Boolean | `false` | Specifies if the shape must be filled with the current fill style |\r\n| eraser | Boolean | `false` | Props to change state from drawing to erasing |\r\n| color | String | `\"#000000\"` | Specifies the color, gradient, or pattern to use for the strokes |\r\n| lineWidth | Number | `5` | Sets the thickness of line |\r\n| lineCap | String | `\"round\"` | Determines the shape used to draw the end points of line.
Accepted value `\"round\"`, `\"square\"`, `\"butt\"`.
Refer to [this site](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap) for more information. |\r\n| lineJoin | String | `\"miter\"` | determines the shape used to join two line segments where they meet.
Accepted value `\"round\"`, `\"miter\"`, `\"square\"`.
Refer to [this site](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin) for more information. |\r\n| lock | Boolean | `false` | Lock canvas for drawing |\r\n| backgroundColor | String | `\"#FFFFFF\"` | Set background color on your canvas |\r\n| backgroundImage | String | | Set background image on your canvas
**_Be carefull for performance issue when using this props !!_** |\r\n| initialImage | Array | `[]` | Draw strokes and shapes from canvas you've worked before. [Demo](https://codesandbox.io/s/vue-drawing-canvas-107-rc1-dcoiy) |\r\n| additionalImages | Array | `[]` | Accept Array of [watermark](#watermark-object) Object to draw either text or insert multiple image on canvas
**_Be carefull for performance issue when using this props !!_** |\r\n| classes | Array, String, Object | | Specifies your own classes to canvas |\r\n| styles | Array, String, Object | | Specifies your own styles to canvas |\r\n| watermark | Object | | Put watermark text/image on your image output
(see details in the next section below) |\r\n| saveAs | String | `\"png\"` | Specifies output type. This props accept either `\"png\"` or `\"jpeg\"` |\r\n| outputWidth | Number | `this.width` | Specifies image output width, if `undefined` then canvas width will be used |\r\n| outputHeight | Number | `this.height` | Specifies image output height, if `undefined` then canvas height will be used |\r\n\r\n
\r\n\r\n### Watermark Object\r\n\r\n
\r\n\r\n```js\r\n{\r\n // Specifies your watermark type. Type can be either \"Text\" or \"Image\"\r\n //\r\n // type: String\r\n // required: true\r\n // validator: (value) => { return [\"Text\", \"Image\"].includes(value) }\r\n type: \"Text\",\r\n // Specifies your watermark source\r\n // If type is \"Text\" enter your watermark text here\r\n // if type if \"Image\" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file\r\n //\r\n // type: String\r\n // required: true\r\n source: \"Watermark\",\r\n // The x-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n //\r\n // type: Number\r\n // required: true\r\n x: 200,\r\n // The y-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n //\r\n // type: Number\r\n // required: true\r\n y: 180,\r\n // Specifies width and height for your watermark image\r\n //\r\n // type: Object\r\n // required: false\r\n imageStyle: {\r\n // The width to draw the image in the canvas\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => this.width\r\n width: 600,\r\n // The height to draw the image in the canvas\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => this.height\r\n height: 400\r\n },\r\n // Specifies text style for your watermark\r\n //\r\n // type: Object\r\n // required: false\r\n fontStyle: {\r\n // The maximum number of pixels wide the text may be once rendered.\r\n // If not specified, there is no limit to the width of the text.\r\n //\r\n // type: Number\r\n // required: false\r\n width: 200,\r\n // Sets the height of text in pixels. Usually this value has same value with font\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => 20\r\n lineHeight: 48,\r\n // Specifies the color, gradient, or pattern to use for the text\r\n //\r\n // type: String\r\n // required: false\r\n // default: () => '#000000'\r\n color: '#FF0000',\r\n // Specifies the current text style to use when drawing text.\r\n // font: '{fontWeight} {fontSize} {fontFamily}'\r\n //\r\n // type: String\r\n // required: false\r\n // default: () => '20px serif'\r\n font: 'bold 48px serif',\r\n // Specifies drawing type to use when drawing text.\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"fill\", \"stroke\"].includes(value) }\r\n // default: () => 'fill'\r\n drawType: 'fill',\r\n // Specifies the current text alignment used when drawing text\r\n // The alignment is relative to the x value\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"left\", \"right\", \"center\", \"start\", \"end\"].includes(value) }\r\n // default: () => 'start'\r\n textAlign: 'left',\r\n // Specifies the current text baseline used when drawing text\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", \"bottom\"].includes(value) }\r\n // default: () => 'alphabetic'\r\n textBaseline: 'top',\r\n // The rotation angle, clockwise in radians\r\n //\r\n // type: Number\r\n // required: false\r\n rotate: 45\r\n }\r\n}\r\n```\r\n\r\n
\r\n\r\n## Methods\r\n\r\n
\r\n\r\n| Method Name | Return Value | Description |\r\n| --------------------- | :-----------------------------: | ----------------------------------------------------- |\r\n| getCoordinates(event) | `{ x: 0, y: 0 }` | Get x-axis and y-axis coordinates from current canvas |\r\n| reset() | | Reset current canvas to new state |\r\n| undo() | | Remove last drawing stroke on current canvas |\r\n| redo() | | Re-draw last removed stroke on current canvas |\r\n| redraw() | | Redraw all strokes on current canvas |\r\n| isEmpty() | `true` or `false` | Get current canvas empty state |\r\n| getAllStrokes() | _`Array of strokes and shapes`_ | Get all strokes and shapes from canvas |\r\n\r\n
\r\n\r\n# Changelog\r\n\r\n[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)\r\n\r\n
\r\n\r\n# License\r\n\r\n[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)\r\n","readmeFilename":"README.md","gitHead":"8ccb4ee19f9deafa976821ac236fe1715f0edfc1","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.1-2.rc-1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-CsW890c6z7wDCzj8JNa3fVoGUz9PSCTcMcwMYtxEt019D0kO39s9+qFREV47u5UWn46BSSUokzrEAliKXHlS7Q==","shasum":"755a6735e5a6b4263b627b53a6eb572ee6f579f1","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.1-2.rc-1.tgz","fileCount":6,"unpackedSize":47171,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDz7347ipPJzxJ2qaUo3adPefPyTMgZtRUoHrrRx7zyLAIgE/axE1XVz+39ZEOisPrZUHtrAY/L0LeMpUlUbBVytDc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieg85ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/nw//Qe/32dacxlTBibDL0wtRNofugGgFWGb+M8jF5JrVRo4/1BNT\r\nSpmBcbG40aODzmeotSMY3QuoVIoYcCFEZorZ6qwifIG3Jt6DPmoNPpHH7YfP\r\nOoH7IlcogsVy0OO+zvx4o8cKKuvJAjnfxaX3CZEPQcp8FLvT2sYthYvnT8ts\r\nRCpjI0xPC4iTlH6ePZeQa05JutgqHBKRy8sx9eyymz7Vw+69beVqiwgRxmQC\r\nPIBgZljcI6LR1tTUiTVUb3iV8W9q2MqryztziYtxWvG3Eq80ztuuDb8P0j8n\r\n9dTN0/nAAGqsOb+k+XVh30piwGDnJd3JTxXZFN0AuwduXRXsezGgKb5AnIYx\r\n+UdHu++PXnTaFPfiPSHRhfo6GqtTr/HIO5DU/K/jQEeoPVQZ0S8TII8LIVJO\r\nprSBplzdedlBKVHsmrAPO9LVJ3PQA4+TdRPIdblHNWCDymxz2mAYsmrmqLOd\r\nDp59widnmIXGPoi8Na2UIzflWEptC04pp+23nyLiH6mbBIQAG4X2sSIVORev\r\ne3QYqScpY062nf28BtMRssuXkGHXTdvkafcj0rlIT/Z6+md0WGUYKevvNjCE\r\nWLC9OuyE3pKQ0IgpMtzTcG2frUjKVmb6VWo6hSdUMzSCkyPY9VrJqZ0H95KA\r\npZvcV4kcIanUdLhxPaUmKHsIuFXvJSYjCYA=\r\n=aW1k\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.1-2.rc-1_1652166457583_0.04773349733757204"},"_hasShrinkwrap":false},"1.0.12":{"name":"vue-drawing-canvas","version":"1.0.12","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","types":"dist/types/src/VueDrawingCanvas.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"gitHead":"960ed23e2212d9b87437a78498e984dbee77f70d","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.12","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-REfOkUPUx4Mt25CTapoSIwjt+aE+XEpA4GxKzM7GMde7Vc+mi7alqpouPxipxNdRJAO0BdTYmqJuucusRgd/+Q==","shasum":"92586ac13aebda7af83ce230e849468612657f6e","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.12.tgz","fileCount":6,"unpackedSize":47166,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHGmG5zXbtJYQrtyzuXRIypFg3lq5CApmeV7FbwAdNrkAiEAyXB290qOiJry/a07eAEvqGa8Yz3SM4fBGUnfz9UzxoQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiehEPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0Tw//e46LNa88gVwrlMEBEJkSS6QmeXswUJd79qIbj+agkri7pOw+\r\nOr0POKS1Iyhdg2gp0N1cH01zj51fJoNnVauEVMgh1mO3LIQHrYnf41sY5W9Z\r\nm8v1f4ijBVt7TgpZE53QaNum9dlPwwrNJg87Z3fEfoK0Fe4vr9JE8Ty6OzKN\r\nCJ2tC2lPs0+Yuzr9EGb5AbdEDYI2MTTrKrZyU6fGieRijqS4V0rEYq5jS5Fx\r\nhoOC5aFciwuoYSdUx86gTRw1hfUaS5Y2hI2cfU8WhqJd26C948hODfjGJbbp\r\nbI3J7zQYAp0ZA6yKOujM/ig+kQz8SD1TyGL4DTLkknBPUY4NyJFWn227V1oS\r\nivPu7A6hYqZV1Qug8+KDc2uC02FSbH7OgDKaYv7P+btYmCVzxsGJK3tqcvdI\r\nF33UBHvVWZLyxgPtk6fgPl+YAPT+vljHadV6CUnIxJp2J2hwEQztJtx3pV+l\r\nv4nxQhFgUTbm3Up2cKqJJITBZH7gt5UFNH2xNAtzFivmQtmnzn9T0aPo2ChO\r\nO+Gi51ZA4Au89nY1yA+Bc5TWlw/IxhCM/JiIOj1dnxbsQO3pEqSeks2uQTB3\r\nICMVQIMFPVCKxKQkN90ylH7G70lHf2WGkZVcPpzPdd78zP1M1KwZgQGpmoVC\r\naFYvAh/NK5Jh4R/YyXCP5dZtxTUpOgt5g2s=\r\n=IGHu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.12_1652166927633_0.5999305061286524"},"_hasShrinkwrap":false},"1.0.13-rc.1":{"name":"vue-drawing-canvas","version":"1.0.13-rc.1","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","types":"dist/types/src/VueDrawingCanvas.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"readme":"vue-drawing-canvas
\r\n\r\nVueJS Component for drawing on canvas.\r\n\r\nSupport for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)\r\n\r\n
\r\n\r\nDemo
\r\n\r\n### Vue 3\r\n\r\n[](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)\r\n\r\n### Vue 2\r\n\r\n> Deployed on a nuxt container which have access to terminal\r\n\r\n
\r\n\r\n[](https://codesandbox.io/s/vue-drawing-canvas-p4slb)\r\n\r\n> Note:\r\n> If you're using nuxt.js and receive error `Object(...) is not a function` please refer to this [issue](https://github.com/razztyfication/vue-drawing-canvas/issues/13)\r\n\r\n
\r\n\r\nTable of Contents
\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Props](#props)\r\n - [Watermark Object](#watermark-object)\r\n - [Methods](#methods)\r\n- [Changelog](#changelog)\r\n- [License](#license)\r\n\r\n
\r\n\r\n# Installation\r\n\r\nInstall using package manager:\r\n\r\n```bash\r\nnpm install --save-dev vue-drawing-canvas\r\n\r\n# or with Vue 2\r\n\r\nnpm install --save-dev vue-drawing-canvas @vue/composition-api\r\n```\r\n\r\nThen add it to your component files\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n
\r\n\r\n# Usage\r\n\r\n## Props\r\n\r\n
\r\n\r\n| Name | Type | Default Value | Description |\r\n| ---------------- | :-------------------: | :----------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| canvasId | String | `VueDrawingCanvas` | Specifies your canvas id |\r\n| width | String, Number | `600` | Specifies canvas width |\r\n| height | String, Number | `400` | Specifies canvas height |\r\n| image | String | | Your v-model to get canvas output to an base64 image |\r\n| strokeType | String | `\"dash\"` | Specifies stroke type to draw on canvas.
Accepted value `\"dash\"`, `\"line\"`, `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"half_triangle\"` |\r\n| fillShape | Boolean | `false` | Specifies if the shape must be filled with the current fill style |\r\n| eraser | Boolean | `false` | Props to change state from drawing to erasing |\r\n| color | String | `\"#000000\"` | Specifies the color, gradient, or pattern to use for the strokes |\r\n| lineWidth | Number | `5` | Sets the thickness of line |\r\n| lineCap | String | `\"round\"` | Determines the shape used to draw the end points of line.
Accepted value `\"round\"`, `\"square\"`, `\"butt\"`.
Refer to [this site](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap) for more information. |\r\n| lineJoin | String | `\"miter\"` | determines the shape used to join two line segments where they meet.
Accepted value `\"round\"`, `\"miter\"`, `\"square\"`.
Refer to [this site](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin) for more information. |\r\n| lock | Boolean | `false` | Lock canvas for drawing |\r\n| backgroundColor | String | `\"#FFFFFF\"` | Set background color on your canvas |\r\n| backgroundImage | String | | Set background image on your canvas
**_Be carefull for performance issue when using this props !!_** |\r\n| initialImage | Array | `[]` | Draw strokes and shapes from canvas you've worked before. [Demo](https://codesandbox.io/s/vue-drawing-canvas-107-rc1-dcoiy) |\r\n| additionalImages | Array | `[]` | Accept Array of [watermark](#watermark-object) Object to draw either text or insert multiple image on canvas
**_Be carefull for performance issue when using this props !!_** |\r\n| classes | Array, String, Object | | Specifies your own classes to canvas |\r\n| styles | Array, String, Object | | Specifies your own styles to canvas |\r\n| watermark | Object | | Put watermark text/image on your image output
(see details in the next section below) |\r\n| saveAs | String | `\"png\"` | Specifies output type. This props accept either `\"png\"` or `\"jpeg\"` |\r\n| outputWidth | Number | `this.width` | Specifies image output width, if `undefined` then canvas width will be used |\r\n| outputHeight | Number | `this.height` | Specifies image output height, if `undefined` then canvas height will be used |\r\n\r\n
\r\n\r\n### Watermark Object\r\n\r\n
\r\n\r\n```js\r\n{\r\n // Specifies your watermark type. Type can be either \"Text\" or \"Image\"\r\n //\r\n // type: String\r\n // required: true\r\n // validator: (value) => { return [\"Text\", \"Image\"].includes(value) }\r\n type: \"Text\",\r\n // Specifies your watermark source\r\n // If type is \"Text\" enter your watermark text here\r\n // if type if \"Image\" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file\r\n //\r\n // type: String\r\n // required: true\r\n source: \"Watermark\",\r\n // The x-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n //\r\n // type: Number\r\n // required: true\r\n x: 200,\r\n // The y-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n //\r\n // type: Number\r\n // required: true\r\n y: 180,\r\n // Specifies width and height for your watermark image\r\n //\r\n // type: Object\r\n // required: false\r\n imageStyle: {\r\n // The width to draw the image in the canvas\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => this.width\r\n width: 600,\r\n // The height to draw the image in the canvas\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => this.height\r\n height: 400\r\n },\r\n // Specifies text style for your watermark\r\n //\r\n // type: Object\r\n // required: false\r\n fontStyle: {\r\n // The maximum number of pixels wide the text may be once rendered.\r\n // If not specified, there is no limit to the width of the text.\r\n //\r\n // type: Number\r\n // required: false\r\n width: 200,\r\n // Sets the height of text in pixels. Usually this value has same value with font\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => 20\r\n lineHeight: 48,\r\n // Specifies the color, gradient, or pattern to use for the text\r\n //\r\n // type: String\r\n // required: false\r\n // default: () => '#000000'\r\n color: '#FF0000',\r\n // Specifies the current text style to use when drawing text.\r\n // font: '{fontWeight} {fontSize} {fontFamily}'\r\n //\r\n // type: String\r\n // required: false\r\n // default: () => '20px serif'\r\n font: 'bold 48px serif',\r\n // Specifies drawing type to use when drawing text.\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"fill\", \"stroke\"].includes(value) }\r\n // default: () => 'fill'\r\n drawType: 'fill',\r\n // Specifies the current text alignment used when drawing text\r\n // The alignment is relative to the x value\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"left\", \"right\", \"center\", \"start\", \"end\"].includes(value) }\r\n // default: () => 'start'\r\n textAlign: 'left',\r\n // Specifies the current text baseline used when drawing text\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", \"bottom\"].includes(value) }\r\n // default: () => 'alphabetic'\r\n textBaseline: 'top',\r\n // The rotation angle, clockwise in radians\r\n //\r\n // type: Number\r\n // required: false\r\n rotate: 45\r\n }\r\n}\r\n```\r\n\r\n
\r\n\r\n## Methods\r\n\r\n
\r\n\r\n| Method Name | Return Value | Description |\r\n| --------------------- | :-----------------------------: | ----------------------------------------------------- |\r\n| getCoordinates(event) | `{ x: 0, y: 0 }` | Get x-axis and y-axis coordinates from current canvas |\r\n| reset() | | Reset current canvas to new state |\r\n| undo() | | Remove last drawing stroke on current canvas |\r\n| redo() | | Re-draw last removed stroke on current canvas |\r\n| redraw() | | Redraw all strokes on current canvas |\r\n| isEmpty() | `true` or `false` | Get current canvas empty state |\r\n| getAllStrokes() | _`Array of strokes and shapes`_ | Get all strokes and shapes from canvas |\r\n\r\n
\r\n\r\n# Changelog\r\n\r\n[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)\r\n\r\n
\r\n\r\n# License\r\n\r\n[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)\r\n","readmeFilename":"README.md","gitHead":"960ed23e2212d9b87437a78498e984dbee77f70d","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.13-rc.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-lwHd9z2YaX7QdUfu6qCiQPg5A2s3rJMKcMqY7OBN5x/JV+w/08mK6Y96l305XS2/OiQjH6EnRPzmE+SlWeLbEQ==","shasum":"4d0b550692a338c745e31b8a3ba25fb9442e64b5","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.13-rc.1.tgz","fileCount":6,"unpackedSize":47332,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwSoNqohDhKGb9n2kWoHw7A6W3fBDTks5EOGGSL3RgDAiEAmaXdtgwhUH3HVatTU2kiDlK80bpgJYGz6GWupiaQESs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifVygACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCvxAAhdce6fPO2Nt1KiichUgokarufrgQv0zCasXn+0QwfH0/WC/d\r\nPL1n8gewqgprmOtCeBxfY3Ij6USM1ScGD7yRkXSoNY180V0LQeN+w42CdMnO\r\nYJi15dtQQxDxwHW0nr5jmxPvdilRRcLVYVAL61IX5soTKA4Ir4eEL5qVFda4\r\n80Fd7tXHCwlj2jULLu9vllBQcYEbedAtdbYsa5rIX5MavzwYrSPzFuaWCQ84\r\nKYFnRJAkRvTR7jWTshVzQnrHYcVFLNFSv26/NqIsQaTMlc1H1dKXRjiTMrJ7\r\nsFGcBjRODfKjVn3DhcyLUhAM/vxyq+DZYRtIIgRozo+ADdQy5+6CSBy+7xIk\r\n7RWPheKD/12D9xH2HmoI7z769ao+sIsqIAVuUZ2Yc9XZJDAD87CAxmnRZ413\r\nffgkBS81jHN9oWG2/6UqAWg9EvDjYE7qYiIGIltahjwqQqrwQW2KTCWrkul9\r\n+OxFLVvj6ZPBKDfEmRQdSJm8bRdmHfoquq58E7AgYTfwKV9pCdUU1PyuvDKg\r\nruf8j6gSrZgMquwMsYvtILSL033+xhRwVMGQMHOBAOpFeu96gQzojYVMjcgi\r\nXvfkJ4dvf8p4kT2aYA7YHfHraf2zTDhJ/pv6xotZfCzubYOOj9D4zEHCjzrk\r\nksPdbJkbKVFlnPHvsVBK4LQ0LE7xdQ9vQlY=\r\n=vekC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.13-rc.1_1652382880496_0.7378902371446374"},"_hasShrinkwrap":false},"1.0.13":{"name":"vue-drawing-canvas","version":"1.0.13","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","types":"dist/types/src/VueDrawingCanvas.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"gitHead":"960ed23e2212d9b87437a78498e984dbee77f70d","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.13","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-QUNiZs2H1Ts0wJ5wOijHkY7mnjauGYr0FppeRHPAnIan3yWl05eizko9CtIEC32SGjL0JpGreq8SZjbdkQseRw==","shasum":"cdd3549b9d21bd2ba39291928f64dd3cc456b2f7","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.13.tgz","fileCount":6,"unpackedSize":47390,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBIZ19f0AA549/nrelMtD4VE8Nr6YuASmqGyV9kVfM4nAiBEVN+UXZQBhGdT+et5DSpjtO9+8kj73rO4yh+zsHpdnw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiffz8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdTA/9EfUlyxYDQIvwk4KRk9QuLbs3HfCTOUAoSV+9LW8zerM8tOcY\r\nk4k1g160agYdQbqWn5h3J1JkonAxSPpX2lDEg4Mx09cfJ2Z0T7XvNXJP30jN\r\nV3udwGnbTDAXOra9aAji9smpigNUdyx3pipX6JkffwpFaaNePO/0lA4UG3HK\r\nhJUczhHwpwQO7xrp33TX9+xxmHqjUihcPHrzjX1CIVbDWQYHilRs3bNG/TvF\r\n3kKv7efwCvvAJMJ1rBEd6ItYOQ+twx5nS2xMeAvNjsPOH/dkBlw+tOef5Bwv\r\nV/IWDicqkCYQxWQT9fwfFUB/vnHUIG3aKKCYE1LsiKQkWuHZ/q5TB3y5evwP\r\nVriRptgabUtM9wicwCIoEA9nOS6y4iVUKwRdzvzQ16TFI7pu2ppbAqu00x4I\r\nY3HEt73HbD+xuauIFRmuCr+dM4PypbIFoprPadBJqkDShwBG1wHujTFHCRvQ\r\npU60tvU5wlarAUDI1eiGry5/0ugWVxSypi6YT5UXqeid/BglNNcr6+mfXPab\r\nD4vEWnuL1x3ZOBPJzk3q7B2KXn1jqbFkQXoms0+to0DswW13YwsD50bLgeRk\r\nvkkbO17W/qju3uNRb9EFT6KCeJ0k+LQPIaJ+rgQpIjbgJwvqxHGOJ7QSks6E\r\nDS9mq2bSqevmsx/Oqvairm/OJBzmEqkIJdE=\r\n=NOM8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.13_1652423932656_0.3353003028034369"},"_hasShrinkwrap":false},"1.0.14":{"name":"vue-drawing-canvas","version":"1.0.14","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","types":"dist/types/src/VueDrawingCanvas.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"gitHead":"35e0b301933058a9afba197bfc7228813775cae5","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.14","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-afsG6bGXD1DDP7pKslJX3LNLi07R/S97e/9/LNXnPZQBlsNnrL3T68rmodBHeMHr83onhMfym+t3kLkDuApW1Q==","shasum":"59f21ea89fe62ffa4aaafb25ec5a6f1cb6871da0","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.14.tgz","fileCount":6,"unpackedSize":47598,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLHnHYko11b/ylBXfT5tlIZ/DmHB0uT1f9Y2gsTuvqhgIgP/lhCtuyKVwK1P89ou0F+0OQW0WRUmkc5hVCvAkOnIQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig9L8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqklQ/7B0sZOIamSM4CFm5PxehGVw4rs3xN32BSeynMQYt0bCw9FXS1\r\no5h+yh9RGLQ4kzJCMZAgNRmmHy8Qh1WbzxTz3WkztT/o/+5d5HamvYT/5nXu\r\nrDq3ml8aE4aG7I0pJCleVnfglchsfrQ71lLk6tGQpHF7cwE1Q6LV/CJtt0AC\r\n9Wb+omThU7YubgHShX+fN/PIAdwYkqAIefmlq5D4v55Y25WEa6cenpOQYZjT\r\nivpUeBHc7rM4ofRxmMwBD63IGBjsU1R/72Xl+wFPMp4Bs6CKTELxDgnvxqeO\r\nixEsQp4CdE+0I3s5A00v8+3XGwHOrxNYiosDZxC8duxwErvUtECefK/QwFDA\r\nkzLmDzpcXnsAaknUdW8+dALt3l4NoDtzcBtW6ku8iZzsP7i3PZGyCuE7DftK\r\n+Rp9jg8JEjXbexCpRw3sA53IALiqDJ+8cV/KVW58vAM9cxpLn8KqySrCwrp0\r\nqr4T9x/jDRtycKsE2MNJMlk1vtQ0woohPOQ6JehiI6iB5YmIUsvg92O6Bv1K\r\n3J/fLT/lfB+A2WTv+/2mQk/HEYlWz/Dfl+F1WAWrCTSMXqKPV0kyMvRbqTpL\r\n+RCeDzAr19OgPjltiebS5zZHUMtSQ2U6js1RY4wLLHsvgWGcEgHRzXdTmNgY\r\n9wU/b+qIbSLXDfS9pPPKMaLdJ2022PfBXBM=\r\n=rpFV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.14_1652806396749_0.9398004939542259"},"_hasShrinkwrap":false},"1.0.15-alpha.1":{"name":"vue-drawing-canvas","version":"1.0.15-alpha.1","author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"homepage":"https://github.com/razztyfication/vue-drawing-canvas","private":false,"description":"VueJS Component for drawing on canvas.","main":"dist/vue-drawing-canvas.esm.js","module":"dist/vue-drawing-canvas.esm.js","types":"dist/types/src/VueDrawingCanvas.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"dependencies":{"vue-demi":"latest"},"devDependencies":{"@babel/core":"^7.16.5","@babel/preset-env":"^7.16.5","@babel/preset-typescript":"^7.16.5","@rollup/plugin-alias":"^3.1.8","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.15","@vue/cli-plugin-typescript":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.61.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0","ttypescript":"^1.5.13","typescript":"^4.5.4","vue":"^3.2.26","vue2":"npm:vue@2"},"peerDependencies":{"@vue/composition-api":"^1.0.0-rc.1","vue":"^2.0.0 || ^3.0.5"},"peerDependenciesMeta":{"@vue/composition-api":{"optional":true}},"license":"MIT","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"engines":{"node":">=12"},"readme":"vue-drawing-canvas
\r\n\r\nVueJS Component for drawing on canvas.\r\n\r\nSupport for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)\r\n\r\n
\r\n\r\nDemo
\r\n\r\n### Vue 3\r\n\r\n[](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)\r\n\r\n### Vue 2\r\n\r\n> Deployed on a nuxt container which have access to terminal\r\n\r\n
\r\n\r\n[](https://codesandbox.io/s/vue-drawing-canvas-p4slb)\r\n\r\n> Note:\r\n> If you're using nuxt.js and receive error `Object(...) is not a function` please refer to this [issue](https://github.com/razztyfication/vue-drawing-canvas/issues/13)\r\n\r\n
\r\n\r\nTable of Contents
\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Props](#props)\r\n - [Watermark Object](#watermark-object)\r\n - [Methods](#methods)\r\n- [Changelog](#changelog)\r\n- [License](#license)\r\n\r\n
\r\n\r\n# Installation\r\n\r\nInstall using package manager:\r\n\r\n```bash\r\nnpm install --save-dev vue-drawing-canvas\r\n\r\n# or with Vue 2\r\n\r\nnpm install --save-dev vue-drawing-canvas @vue/composition-api\r\n```\r\n\r\nThen add it to your component files\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n
\r\n\r\n# Usage\r\n\r\n## Props\r\n\r\n
\r\n\r\n| Name | Type | Default Value | Description |\r\n| ---------------- | :-------------------: | :----------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| canvasId | String | `VueDrawingCanvas` | Specifies your canvas id |\r\n| width | String, Number | `600` | Specifies canvas width |\r\n| height | String, Number | `400` | Specifies canvas height |\r\n| image | String | | Your v-model to get canvas output to an base64 image |\r\n| strokeType | String | `\"dash\"` | Specifies stroke type to draw on canvas.
Accepted value `\"dash\"`, `\"line\"`, `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"half_triangle\"` |\r\n| fillShape | Boolean | `false` | Specifies if the shape must be filled with the current fill style |\r\n| eraser | Boolean | `false` | Props to change state from drawing to erasing |\r\n| color | String | `\"#000000\"` | Specifies the color, gradient, or pattern to use for the strokes |\r\n| lineWidth | Number | `5` | Sets the thickness of line |\r\n| lineCap | String | `\"round\"` | Determines the shape used to draw the end points of line.
Accepted value `\"round\"`, `\"square\"`, `\"butt\"`.
Refer to [this site](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap) for more information. |\r\n| lineJoin | String | `\"miter\"` | determines the shape used to join two line segments where they meet.
Accepted value `\"round\"`, `\"miter\"`, `\"square\"`.
Refer to [this site](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin) for more information. |\r\n| lock | Boolean | `false` | Lock canvas for drawing |\r\n| backgroundColor | String | `\"#FFFFFF\"` | Set background color on your canvas |\r\n| backgroundImage | String | | Set background image on your canvas
**_Be carefull for performance issue when using this props !!_** |\r\n| backgroundSize | String | `\"cover\"` | Specifies background image size. This props accept either `\"cover\"` or `\"contain\"` |\r\n| initialImage | Array | `[]` | Draw strokes and shapes from canvas you've worked before. [Demo](https://codesandbox.io/s/vue-drawing-canvas-107-rc1-dcoiy) |\r\n| additionalImages | Array | `[]` | Accept Array of [watermark](#watermark-object) Object to draw either text or insert multiple image on canvas
**_Be carefull for performance issue when using this props !!_** |\r\n| classes | Array, String, Object | | Specifies your own classes to canvas |\r\n| styles | Array, String, Object | | Specifies your own styles to canvas |\r\n| watermark | Object | | Put watermark text/image on your image output
(see details in the next section below) |\r\n| saveAs | String | `\"png\"` | Specifies output type. This props accept either `\"png\"` or `\"jpeg\"` |\r\n| outputWidth | Number | `this.width` | Specifies image output width, if `undefined` then canvas width will be used |\r\n| outputHeight | Number | `this.height` | Specifies image output height, if `undefined` then canvas height will be used |\r\n\r\n
\r\n\r\n### Watermark Object\r\n\r\n
\r\n\r\n```js\r\n{\r\n // Specifies your watermark type. Type can be either \"Text\" or \"Image\"\r\n //\r\n // type: String\r\n // required: true\r\n // validator: (value) => { return [\"Text\", \"Image\"].includes(value) }\r\n type: \"Text\",\r\n // Specifies your watermark source\r\n // If type is \"Text\" enter your watermark text here\r\n // if type if \"Image\" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file\r\n //\r\n // type: String\r\n // required: true\r\n source: \"Watermark\",\r\n // The x-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n //\r\n // type: Number\r\n // required: true\r\n x: 200,\r\n // The y-axis coordinate of the point at which to begin drawing the watermark,\r\n // in pixels\r\n //\r\n // type: Number\r\n // required: true\r\n y: 180,\r\n // Specifies width and height for your watermark image\r\n //\r\n // type: Object\r\n // required: false\r\n imageStyle: {\r\n // The width to draw the image in the canvas\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => this.width\r\n width: 600,\r\n // The height to draw the image in the canvas\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => this.height\r\n height: 400\r\n },\r\n // Specifies text style for your watermark\r\n //\r\n // type: Object\r\n // required: false\r\n fontStyle: {\r\n // The maximum number of pixels wide the text may be once rendered.\r\n // If not specified, there is no limit to the width of the text.\r\n //\r\n // type: Number\r\n // required: false\r\n width: 200,\r\n // Sets the height of text in pixels. Usually this value has same value with font\r\n //\r\n // type: Number\r\n // required: false\r\n // default: () => 20\r\n lineHeight: 48,\r\n // Specifies the color, gradient, or pattern to use for the text\r\n //\r\n // type: String\r\n // required: false\r\n // default: () => '#000000'\r\n color: '#FF0000',\r\n // Specifies the current text style to use when drawing text.\r\n // font: '{fontWeight} {fontSize} {fontFamily}'\r\n //\r\n // type: String\r\n // required: false\r\n // default: () => '20px serif'\r\n font: 'bold 48px serif',\r\n // Specifies drawing type to use when drawing text.\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"fill\", \"stroke\"].includes(value) }\r\n // default: () => 'fill'\r\n drawType: 'fill',\r\n // Specifies the current text alignment used when drawing text\r\n // The alignment is relative to the x value\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"left\", \"right\", \"center\", \"start\", \"end\"].includes(value) }\r\n // default: () => 'start'\r\n textAlign: 'left',\r\n // Specifies the current text baseline used when drawing text\r\n //\r\n // type: String\r\n // required: false\r\n // validator: (value) => { return [\"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", \"bottom\"].includes(value) }\r\n // default: () => 'alphabetic'\r\n textBaseline: 'top',\r\n // The rotation angle, clockwise in radians\r\n //\r\n // type: Number\r\n // required: false\r\n rotate: 45\r\n }\r\n}\r\n```\r\n\r\n
\r\n\r\n## Methods\r\n\r\n
\r\n\r\n| Method Name | Return Value | Description |\r\n| --------------------- | :-----------------------------: | ----------------------------------------------------- |\r\n| getCoordinates(event) | `{ x: 0, y: 0 }` | Get x-axis and y-axis coordinates from current canvas |\r\n| reset() | | Reset current canvas to new state |\r\n| undo() | | Remove last drawing stroke on current canvas |\r\n| redo() | | Re-draw last removed stroke on current canvas |\r\n| redraw() | | Redraw all strokes on current canvas |\r\n| isEmpty() | `true` or `false` | Get current canvas empty state |\r\n| getAllStrokes() | _`Array of strokes and shapes`_ | Get all strokes and shapes from canvas |\r\n\r\n
\r\n\r\n# Changelog\r\n\r\n[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)\r\n\r\n
\r\n\r\n# License\r\n\r\n[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)\r\n","readmeFilename":"README.md","gitHead":"476488162afa2242a3cf7704917f95afa9909702","bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"_id":"vue-drawing-canvas@1.0.15-alpha.1","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Q0+q2wnAcbJ6npNj84hhAyVwlFggdsgaurOEUvlt4CbgLVDgHfraLpGkjAeSQBEwwL8NSlQqIunJG5abR++8rA==","shasum":"73e1d00b6ab6a5e573a45b8eab5930a7c7028452","tarball":"https://registry.npmjs.org/vue-drawing-canvas/-/vue-drawing-canvas-1.0.15-alpha.1.tgz","fileCount":5,"unpackedSize":45990,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDos5C1pAZ15fbtEVMWsegb2BYAXrr62QFGUjVd0zpixwIhAML+OVDs0PBfJtwiwxqZKrDSk855LmxJ2MQjxVXQdrh6"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0OG3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr3xAAg3DS9nZZtjO2c7aRyeJ6OOlvHTXnpTHJ9ZgMheS6JeXxmC8e\r\nRzYOnHZ3BIqp/tJO67FmIPzVVQF3e65YQL5A4JEsX2duhFbLsZkCOJuzqB8w\r\nW9W6p/51IGpzX3P9NJstgjBwfU8Ddqwhu71vuTEQLP7SA8WNsDdVScZBRmxd\r\nfR7ibvblL6TPIzV/6UrQ+fGVlp98R3ESmDOsHn6LdcQTJBeiOXIMbpAp1DHP\r\n1LVfVf6tGim8IdSzPmNRhPbogK/J8GeuJ3Q3mYQYDAp1v8oMW630sbuoLe5Y\r\nCzzbgFQbAk4aJdzXFo/iXY6M8ksm0x6apvzS83boEbypiG18dRHBDI49TjlN\r\ntQdQqvvSE23JghpLWlNbfjjbmJyZszIVbcwvJvAYE9ZMy2Rrzl+Odpq6kFqC\r\nK6JMiwMOkm4c+1NscwiMQYLUUOh24kOodqZ8NeWZu2NoQPeULjlOCHj72jVB\r\n8Hy26UK7tq7ooTx+wq61TMF0g3eD1dCi3RwkurIoicCbmSmzXxpxriLfq0rz\r\ne8PORmobliqkfAN/og/ajdcvj//c1RW1TpMeltMqtT4Hqel40EWVFCD5BW37\r\nTVWmTQR1lF1IBx655cLaqOtQ4r3TfLyD0CinlFal0Hs3sjG6vuti0ChsORGn\r\n5BOIW1r9ofeLeqEmymZddHNP5fy+BS4eHcM=\r\n=uY0L\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"razztyfication","email":"tonioktoro@gmail.com"},"directories":{},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-drawing-canvas_1.0.15-alpha.1_1657856439367_0.0592775081523087"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-31T05:11:20.340Z","1.0.0":"2021-07-31T05:11:20.558Z","modified":"2022-07-15T03:40:40.048Z","1.0.1":"2021-08-03T17:17:45.228Z","1.0.2-betaver.1":"2021-10-05T04:59:36.054Z","1.0.2":"2021-10-05T05:13:51.376Z","1.0.3-betaver.1":"2021-10-06T10:27:15.993Z","1.0.3":"2021-10-06T10:37:24.005Z","1.0.4-beta.1":"2021-11-25T10:05:12.382Z","1.0.4":"2021-11-30T05:58:12.900Z","1.0.5":"2021-12-11T01:52:16.745Z","1.0.6-rc.1":"2021-12-13T04:35:52.872Z","1.0.6":"2021-12-13T04:39:04.782Z","1.0.7-rc.1":"2021-12-22T03:42:58.797Z","1.0.7":"2021-12-22T08:36:04.840Z","1.0.8":"2022-01-14T16:57:36.890Z","1.0.9-rc.1":"2022-02-02T05:54:55.570Z","1.0.9-rc.2":"2022-02-04T21:05:43.278Z","1.0.9-rc.3":"2022-02-06T19:28:33.780Z","1.0.9":"2022-02-12T17:16:53.949Z","1.0.10-rc.1":"2022-04-10T21:49:57.877Z","1.0.10-rc.2":"2022-04-16T17:37:53.713Z","1.0.10":"2022-04-17T15:08:39.716Z","1.0.11-rc.1":"2022-04-27T16:22:26.415Z","1.0.11":"2022-04-27T16:26:42.574Z","1.0.1-2.rc-1":"2022-05-10T07:07:37.805Z","1.0.12":"2022-05-10T07:15:27.802Z","1.0.1-3.rc-1":"2022-05-12T19:11:39.345Z","1.0.13-rc.1":"2022-05-12T19:14:40.696Z","1.0.13":"2022-05-13T06:38:52.820Z","1.0.14":"2022-05-17T16:53:16.934Z","1.0.15-alpha.1":"2022-07-15T03:40:39.951Z"},"maintainers":[{"name":"razztyfication","email":"tonioktoro@gmail.com"}],"description":"VueJS Component for drawing on canvas.","homepage":"https://github.com/razztyfication/vue-drawing-canvas","keywords":["vue","vuejs","vue2","vue3","canvas","signature","draw","drawing"],"repository":{"type":"git","url":"git+https://github.com/razztyfication/vue-drawing-canvas.git"},"author":{"name":"Toni Oktoro","email":"tonioktoro@gmail.com"},"bugs":{"url":"https://github.com/razztyfication/vue-drawing-canvas/issues"},"license":"MIT","readme":"","readmeFilename":""}