{"id":22420597,"url":"https://github.com/a-sync/canvas-whiteboard","last_synced_at":"2025-08-01T04:32:12.758Z","repository":{"id":86400813,"uuid":"105085190","full_name":"a-sync/canvas-whiteboard","owner":"a-sync","description":"A canvas based whiteboard which can share drawings with other whiteboards.","archived":false,"fork":false,"pushed_at":"2018-03-10T04:10:11.000Z","size":27,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-07T15:01:35.863Z","etag":null,"topics":["canvas","canvas-whiteboard","draw","whiteboard"],"latest_commit_sha":null,"homepage":"https://a-sync.github.io/canvas-whiteboard/test.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/a-sync.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-09-28T00:58:14.000Z","updated_at":"2023-11-14T09:49:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"10aea82f-450f-4e92-a219-6a7d94e1ab8b","html_url":"https://github.com/a-sync/canvas-whiteboard","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/a-sync/canvas-whiteboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-sync%2Fcanvas-whiteboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-sync%2Fcanvas-whiteboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-sync%2Fcanvas-whiteboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-sync%2Fcanvas-whiteboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a-sync","download_url":"https://codeload.github.com/a-sync/canvas-whiteboard/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-sync%2Fcanvas-whiteboard/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268171004,"owners_count":24207407,"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","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","canvas-whiteboard","draw","whiteboard"],"created_at":"2024-12-05T16:20:27.117Z","updated_at":"2025-08-01T04:32:12.750Z","avatar_url":"https://github.com/a-sync.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Canvas whiteboard\nInitialize a whiteboard with a canvas element's id.  \n*You should define the same inner canvas width/height for connected whiteboards. Use the options or the canvas element attributes.*\n\n## Usage\n```html\n\u003ccanvas id=\"canvas-1\" width=\"1920\" height=\"1080\"\u003e\u003c/canvas\u003e\n```\n\n```javascript\n// Handle drawings\nfunction bufferHandler(buffer, options) {\n    console.log(buffer.length, options);\n}\n\nconst whiteboard = new Whiteboard('canvas-1', bufferHandler, options);\n```\n\nTo create a whiteboard without drawing enabled, define `bufferHandler` as `null`.\n\n### Default options\n  * `strokeStyle: '#f00'` // [canvas context property](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle)\n  * `globalAlpha: 1` // [canvas context property](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha)\n  * `lineWidth: 10` // [canvas context property](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth)\n  * `lineCap: 'round'` // [canvas context property](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap)\n  * `lineJoin: 'round'` // [canvas context property](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin)\n  * `globalCompositeOperation: 'source-over'` // [canvas context property](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)\n  * `timeout: 20000` // time delay in ms for clearing the whiteboard\n  * `width: null` // [canvas property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/width)\n  * `height: null` // [canvas property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/height)\n  * `offsetX: 0` // horizontal drawing offset in pixels\n  * `offsetY: 0` // vertical drawing offset in pixels\n\n## API\n### new Whiteboard(canvasId, bufferHandler, options)\nReturns a new whiteboard object. Invokes `.init()` and optionally `.bindMouseHandlers()`.\n  * `canvasId` (string) id of canvas element in the DOM\n  * `bufferHandler` (function) optional handler function to enable and capture drawings\n  * `options` (object) available options for the new whiteboard instance\n    ```javascript\n    {\n        strokeStyle\n        globalAlpha\n        lineWidth\n        lineCap\n        lineJoin\n        globalCompositeOperation\n        timeout\n        width\n        height\n        offsetX\n        offsetY\n    }\n    ```\n\n#### .bufferHandler(buffer, options)\n  * `buffer` (array) filled with arrays of x,y coordinates relative to the inner canvas `[[0,0],[20,10],[40,20]...]`\n  * `options` (object) some options of the source whiteboard\n    ```javascript\n    {\n        strokeStyle\n        globalAlpha\n        lineWidth\n        lineCap\n        lineJoin\n        globalCompositeOperation\n        timeout\n        width\n        height\n    }\n    ```\n\n#### .draw(buffer, options)\nDraw the buffer to the whiteboard.\n  * `buffer` (array) arrays of x,y coordinates relative to the inner canvas `[[0,0],[20,10],[40,20]...]`\n  * `options` (object) available options to override when drawing the buffer to the whiteboard\n    ```javascript\n    {\n        strokeStyle\n        globalAlpha\n        lineWidth\n        lineCap\n        lineJoin\n        globalCompositeOperation\n        timeout\n        offsetX\n        offsetY\n    }\n    ```\n\n#### .clean()\nClean the whiteboard.\n\n#### .bindMouseHandlers()\nBind mouse event handlers to the canvas. *(onmousedown, onmousemove, onmouseup, onmouseout)*\n\n#### .unbindMouseHandlers()\nRemove mouse event handlers from the canvas.\n\n#### .bindTouchHandlers()\nBind touch event handlers to the canvas. *(touchstart, touchmove, touchend, touchcancel)*\n\n#### .unbindTouchHandlers()\nRemove touch event handlers from the canvas.\n\n## Network transport test\nYou need [crossbar](https://crossbar.io/docs/Installation/) installed.\n\nInitialize crossbar service with the default template from the root folder and start the router.\n```bash\ncd canvas-whiteboard\ncrossbar init\ncrossbar start\n```\nOpen instances of crossbar.html in multiple browsers.\n\n## TODO\n * filter out middle points from buffer before sending it to handler\n * v2: only send starting coordinate + deltas of next positions\n * v2: buffer all drawings separately with unique timeouts\n * v2: multi touch drawing support\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-sync%2Fcanvas-whiteboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa-sync%2Fcanvas-whiteboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-sync%2Fcanvas-whiteboard/lists"}