{"id":15067494,"url":"https://github.com/razztyfication/vue-drawing-canvas","last_synced_at":"2025-04-06T16:12:16.045Z","repository":{"id":42197400,"uuid":"391260716","full_name":"razztyfication/vue-drawing-canvas","owner":"razztyfication","description":"VueJS Component for drawing on canvas.","archived":false,"fork":false,"pushed_at":"2023-03-26T16:34:10.000Z","size":386,"stargazers_count":114,"open_issues_count":10,"forks_count":23,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T15:08:19.515Z","etag":null,"topics":["canvas","draw","drawing","signature","vue","vue2","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://github.com/razztyfication/vue-drawing-canvas","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/razztyfication.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-31T05:08:31.000Z","updated_at":"2025-03-27T17:25:30.000Z","dependencies_parsed_at":"2024-12-16T19:13:10.016Z","dependency_job_id":"1cd34c41-46d2-44f1-be33-8c28debc49f6","html_url":"https://github.com/razztyfication/vue-drawing-canvas","commit_stats":{"total_commits":22,"total_committers":5,"mean_commits":4.4,"dds":0.2272727272727273,"last_synced_commit":"476488162afa2242a3cf7704917f95afa9909702"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razztyfication%2Fvue-drawing-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razztyfication%2Fvue-drawing-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razztyfication%2Fvue-drawing-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razztyfication%2Fvue-drawing-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/razztyfication","download_url":"https://codeload.github.com/razztyfication/vue-drawing-canvas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247509232,"owners_count":20950232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","draw","drawing","signature","vue","vue2","vue3","vuejs"],"created_at":"2024-09-25T01:24:25.477Z","updated_at":"2025-04-06T16:12:16.027Z","avatar_url":"https://github.com/razztyfication.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1\u003evue-drawing-canvas\u003c/h1\u003e\n\nVueJS Component for drawing on canvas.\n\nSupport for both Vue 3 and Vue 2 + [Composition API](https://github.com/vuejs/composition-api)\n\n\u003cbr\u003e\u003cbr\u003e\n\n\u003ch2\u003eDemo\u003c/h2\u003e\n\n### Vue 3\n\n[![Vue 3 Drawing Canvas Demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-3-drawing-canvas-demo-ihmmz)\n\n### Vue 2\n\n\u003e Deployed on a nuxt container which have access to terminal\n\n\u003cbr\u003e\n\n[![vue-drawing-canvas](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-drawing-canvas-p4slb)\n\n\u003e Note:\n\u003e 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)\n\n\u003cbr\u003e\u003cbr\u003e\n\n\u003ch1\u003eTable of Contents\u003c/h1\u003e\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Props](#props)\n    - [Watermark Object](#watermark-object)\n  - [Methods](#methods)\n- [Changelog](#changelog)\n- [License](#license)\n\n\u003cbr\u003e\u003cbr\u003e\n\n# Installation\n\nInstall using package manager:\n\n```bash\nnpm install --save-dev vue-drawing-canvas\n\n# or with Vue 2\n\nnpm install --save-dev vue-drawing-canvas @vue/composition-api\n```\n\nThen add it to your component files\n\n```html\n\u003c!-- MyComponent.vue --\u003e\n\n\u003ctemplate\u003e\n  \u003cvue-drawing-canvas ref=\"VueCanvasDrawing\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import VueDrawingCanvas from \"vue-drawing-canvas\";\n\n  export default {\n    name: \"MyComponent\",\n    components: {\n      VueDrawingCanvas,\n    },\n  };\n\u003c/script\u003e\n```\n\n\u003cbr\u003e\u003cbr\u003e\n\n# Usage\n\n## Props\n\n\u003cbr\u003e\n\n| Name             |         Type          |   Default Value    | Description                                                                                                                                                                                                                                                    |\n| ---------------- | :-------------------: | :----------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| canvasId         |        String         | `VueDrawingCanvas` | Specifies your canvas id                                                                                                                                                                                                                                       |\n| width            |    String, Number     |       `600`        | Specifies canvas width                                                                                                                                                                                                                                         |\n| height           |    String, Number     |       `400`        | Specifies canvas height                                                                                                                                                                                                                                        |\n| image            |        String         |                    | Your v-model to get canvas output to an base64 image                                                                                                                                                                                                           |\n| strokeType       |        String         |      `\"dash\"`      | Specifies stroke type to draw on canvas.\u003cbr\u003e\u003cbr\u003eAccepted value `\"dash\"`, `\"line\"`, `\"circle\"`, `\"square\"`, `\"triangle\"`, `\"half_triangle\"`                                                                                                                     |\n| fillShape        |        Boolean        |      `false`       | Specifies if the shape must be filled with the current fill style                                                                                                                                                                                              |\n| eraser           |        Boolean        |      `false`       | Props to change state from drawing to erasing                                                                                                                                                                                                                  |\n| color            |        String         |    `\"#000000\"`     | Specifies the color, gradient, or pattern to use for the strokes                                                                                                                                                                                               |\n| lineWidth        |        Number         |        `5`         | Sets the thickness of line                                                                                                                                                                                                                                     |\n| lineCap          |        String         |     `\"round\"`      | Determines the shape used to draw the end points of line.\u003cbr\u003e\u003cbr\u003eAccepted value `\"round\"`, `\"square\"`, `\"butt\"`.\u003cbr\u003eRefer to [this site](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap) for more information.              |\n| lineJoin         |        String         |     `\"miter\"`      | determines the shape used to join two line segments where they meet.\u003cbr\u003e\u003cbr\u003eAccepted value `\"round\"`, `\"miter\"`, `\"square\"`.\u003cbr\u003eRefer to [this site](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin) for more information. |\n| lock             |        Boolean        |      `false`       | Lock canvas for drawing                                                                                                                                                                                                                                        |\n| backgroundColor  |        String         |    `\"#FFFFFF\"`     | Set background color on your canvas                                                                                                                                                                                                                            |\n| backgroundImage  |        String         |                    | Set background image on your canvas\u003cbr\u003e\u003cbr\u003e**_Be carefull for performance issue when using this props !!_**                                                                                                                                                    |\n| initialImage     |         Array         |        `[]`        | Draw strokes and shapes from canvas you've worked before. [Demo](https://codesandbox.io/s/vue-drawing-canvas-107-rc1-dcoiy)                                                                                                                                    |\n| additionalImages |         Array         |        `[]`        | Accept Array of [watermark](#watermark-object) Object to draw either text or insert multiple image on canvas\u003cbr\u003e\u003cbr\u003e**_Be carefull for performance issue when using this props !!_**                                                                           |\n| classes          | Array, String, Object |                    | Specifies your own classes to canvas                                                                                                                                                                                                                           |\n| styles           | Array, String, Object |                    | Specifies your own styles to canvas                                                                                                                                                                                                                            |\n| watermark        |        Object         |                    | Put watermark text/image on your image output\u003cbr\u003e\u003cbr\u003e(see details in the next section below)                                                                                                                                                                   |\n| saveAs           |        String         |      `\"png\"`       | Specifies output type. This props accept either `\"png\"` or `\"jpeg\"`                                                                                                                                                                                            |\n| outputWidth      |        Number         |   `this.width`     | Specifies image output width, if `undefined` then canvas width will be used                                                                                                                                                                                    |\n| outputHeight     |        Number         |   `this.height`    | Specifies image output height, if `undefined` then canvas height will be used                                                                                                                                                                                  |\n\n\u003cbr\u003e\n\n### Watermark Object\n\n\u003cbr\u003e\n\n```js\n{\n  // Specifies your watermark type. Type can be either \"Text\" or \"Image\"\n  //\n  // type: String\n  // required: true\n  // validator: (value) =\u003e { return [\"Text\", \"Image\"].includes(value) }\n  type: \"Text\",\n  // Specifies your watermark source\n  // If type is \"Text\" enter your watermark text here\n  // if type if \"Image\" enter your uploaded file createObjectURL(event.target.files[0]) Work best with .png file\n  //\n  // type: String\n  // required: true\n  source: \"Watermark\",\n  // The x-axis coordinate of the point at which to begin drawing the watermark,\n  // in pixels\n  //\n  // type: Number\n  // required: true\n  x: 200,\n  // The y-axis coordinate of the point at which to begin drawing the watermark,\n  // in pixels\n  //\n  // type: Number\n  // required: true\n  y: 180,\n  // Specifies width and height for your watermark image\n  //\n  // type: Object\n  // required: false\n  imageStyle: {\n    // The width to draw the image in the canvas\n    //\n    // type: Number\n    // required: false\n    // default: () =\u003e this.width\n    width: 600,\n    // The height to draw the image in the canvas\n    //\n    // type: Number\n    // required: false\n    // default: () =\u003e this.height\n    height: 400\n  },\n  // Specifies text style for your watermark\n  //\n  // type: Object\n  // required: false\n  fontStyle: {\n    // The maximum number of pixels wide the text may be once rendered.\n    // If not specified, there is no limit to the width of the text.\n    //\n    // type: Number\n    // required: false\n    width: 200,\n    // Sets the height of text in pixels. Usually this value has same value with font\n    //\n    // type: Number\n    // required: false\n    // default: () =\u003e 20\n    lineHeight: 48,\n    // Specifies the color, gradient, or pattern to use for the text\n    //\n    // type: String\n    // required: false\n    // default: () =\u003e '#000000'\n    color: '#FF0000',\n    // Specifies the current text style to use when drawing text.\n    // font: '{fontWeight} {fontSize} {fontFamily}'\n    //\n    // type: String\n    // required: false\n    // default: () =\u003e '20px serif'\n    font: 'bold 48px serif',\n    // Specifies drawing type to use when drawing text.\n    //\n    // type: String\n    // required: false\n    // validator: (value) =\u003e { return [\"fill\", \"stroke\"].includes(value) }\n    // default: () =\u003e 'fill'\n    drawType: 'fill',\n    // Specifies the current text alignment used when drawing text\n    // The alignment is relative to the x value\n    //\n    // type: String\n    // required: false\n    // validator: (value) =\u003e { return [\"left\", \"right\", \"center\", \"start\", \"end\"].includes(value) }\n    // default: () =\u003e 'start'\n    textAlign: 'left',\n    // Specifies the current text baseline used when drawing text\n    //\n    // type: String\n    // required: false\n    // validator: (value) =\u003e { return [\"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", \"bottom\"].includes(value) }\n    // default: () =\u003e 'alphabetic'\n    textBaseline: 'top',\n    // The rotation angle, clockwise in radians\n    //\n    // type: Number\n    // required: false\n    rotate: 45\n  }\n}\n```\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Methods\n\n\u003cbr\u003e\n\n| Method Name           |          Return Value           | Description                                           |\n| --------------------- | :-----------------------------: | ----------------------------------------------------- |\n| getCoordinates(event) |        `{ x: 0, y: 0 }`         | Get x-axis and y-axis coordinates from current canvas |\n| reset()               |                                 | Reset current canvas to new state                     |\n| undo()                |                                 | Remove last drawing stroke on current canvas          |\n| redo()                |                                 | Re-draw last removed stroke on current canvas         |\n| redraw()              |                                 | Redraw all strokes on current canvas                  |\n| isEmpty()             |        `true` or `false`        | Get current canvas empty state                        |\n| getAllStrokes()       | _`Array of strokes and shapes`_ | Get all strokes and shapes from canvas                |\n\n\u003cbr\u003e\u003cbr\u003e\n\n# Changelog\n\n[Read here](https://github.com/razztyfication/vue-drawing-canvas/blob/master/CHANGELOG.md)\n\n\u003cbr\u003e\u003cbr\u003e\n\n# License\n\n[MIT](https://github.com/razztyfication/vue-drawing-canvas/blob/master/LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frazztyfication%2Fvue-drawing-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frazztyfication%2Fvue-drawing-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frazztyfication%2Fvue-drawing-canvas/lists"}