{"id":23701154,"url":"https://github.com/ehanlin/writing-pad","last_synced_at":"2026-01-29T10:30:15.860Z","repository":{"id":57150782,"uuid":"77678568","full_name":"eHanlin/writing-pad","owner":"eHanlin","description":"The writing-pad support some basic features.","archived":false,"fork":false,"pushed_at":"2024-01-19T01:26:12.000Z","size":5156,"stargazers_count":0,"open_issues_count":3,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-16T08:04:00.331Z","etag":null,"topics":["canvas","draw"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/eHanlin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-12-30T10:09:25.000Z","updated_at":"2022-03-16T09:59:52.000Z","dependencies_parsed_at":"2023-12-25T03:21:12.776Z","dependency_job_id":"d3c84b81-430c-4b28-87ea-5e0311ab9478","html_url":"https://github.com/eHanlin/writing-pad","commit_stats":{"total_commits":245,"total_committers":1,"mean_commits":245.0,"dds":0.0,"last_synced_commit":"9d0d66a10cd1c27ad71fc480bbe9d5f4f31fa7d8"},"previous_names":[],"tags_count":84,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eHanlin%2Fwriting-pad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eHanlin%2Fwriting-pad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eHanlin%2Fwriting-pad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eHanlin%2Fwriting-pad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eHanlin","download_url":"https://codeload.github.com/eHanlin/writing-pad/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239776633,"owners_count":19695145,"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"],"created_at":"2024-12-30T09:32:20.184Z","updated_at":"2026-01-29T10:30:15.824Z","avatar_url":"https://github.com/eHanlin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"writing-pad\n==============================\n\n## Dependencies\n\n* [drawingboard.js](https://github.com/eHanlin/drawingboard.js.git#v0.4.10)\n* font-awesome\n* jquery\n\n\n## Usage\n\n```js\nvar container = document.querySelector(\"#container\");\nvar board = writingPad.build(container);\nboard.show()\nboard.resize()\n```\n\n## API\n \n### writingPad.build(element, opts)\n\nCreate an instance of writingPad class.\n\n#### element\n\nAppend to element container.\n\n#### opts\n\nThis is some optional settings.\n\n* **opts.canvasWidth:** Set canvas width. The canvas is able to view width as wide as container when canvas width is wider than container.\n* **opts.controlsLayout:** Set control panel's layout.(left 、 center 、 right or left-right)\n* **opts.useMovingGesture:** Set true if you want to use scale gesture.\n* **opts.isDrawingOnEvent:** Use event to draw canvas, if value is true.\n* **opts.gridTipText:** Set the tip text of grid's background.\n* **opts.hintAreaText:** Set hint that is able to write area.\n* **opts.controls:**  The control panel's setup support `Drawing` 、 `Eraser` 、 `Grid` 、 `ExtendVertical` 、 `Close` 、 `Reset` 、 `Undo` 、 `Redo` 、 `Color` and so on.\n\u003e Set `color` or `lineWidth` if you use `Drawing`. (ie `{Drawing:{color:'rgba(0, 0, 255, 1)', lineWidth:'5'}}`).\n\u003e The `Reset` feature is able to set `disabledConfirmation` and `confirmationText`. (ie `{Reset:{confirmationText:'Do you want to clear board?'}}`)\n\nSee [this](https://github.com/eHanlin/drawingboard.js#included-controls) if you want to use `drawingboard.js` controls.\n\n### WritingPad\n\n\n##### resize()\n\nResize canvas width.\n\n##### show()\n\nShow a container.\n\n##### hide()\n\nHide a container.\n\n##### isHidden()\n\nReturn true if current container's display is none.\n\n##### toImage()\n\nGet a image of base64.\n\n##### toBlob(type, quality):Promise\n\nGet a blob.\n\n```js\nboard.toBlob().then(function(blob){\n  //do something\n});\n```\n\n##### load(resource)\n\nLoad a image to draw canvas, the resource can be url or img.\n\nYou must set `img.crossOrigin` and cross domain headers If your canvas need be exported what to use `toBlob` or `toImage`.\n\n##### saveByKey(key)\n\nSave current canvas to history by key.\n\n##### restoreByKey(key, opts)\n\nDraw a canvas from history's key.\n\n* opts.useHistoryHeight: Reset canvas height from history's canvas height, if useHistoryHeight is true.\n\n##### deleteKey(key)\n\nDelete history by key.\n\n##### containKey(key)\n\nReturn true if this key exist history.\n\n##### clearStorage()\n\nRemove images from storage\n\n##### openGridBg()\n\nShow the grid background.\n\n##### closeGridBg()\n\nHide the grid background.\n\n##### toggleGridBg()\n\nShow or hide the grid background.\n\n##### getHeight()\n\nGet the container's height.\n\n##### extendHeight(height)\n\nIncrease container's height.\n\n* height: Input increasing values.\n* opts.slide: The `slide` height/200px if value is true.\n* opts.slideDuration: Durations are given in milliseconds. The default duration is `450`.\n* opts.slideEl: The `slideEl` is element or css selector string which slides scroll top.\n\n##### resetHeight(height)\n\nReset canvas height.\n\n* height: canvas height.\n\n##### autosize(auto:boolean)\n\nResize canvas width when `resize` event is triggered by browser.\n\n##### openHintWritingArea()\n\nOpen hint that is able to write area.\n\n##### closeHintWritingArea()\n\nClose hint that is able to write area.\n\n##### getControl(id:string)\n\nGet a control object by id. Be able to set id in `opts.controls` like this：\n\n```\nwritingPad.build(container, {\n  controls:[\n    {\n      Drawing: {\n        id:'1'\n      }\n    }\n  ]\n})\n```\n\n\n### Events\n\n* hide\n* startDrawing\n* stopDrawing\n* drawing\n* openColorPicker\n* closeColorPicker\n* clear\n* changeDrawingColor\n* changeDrawingSize\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehanlin%2Fwriting-pad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fehanlin%2Fwriting-pad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehanlin%2Fwriting-pad/lists"}