{"id":13445573,"url":"https://github.com/tennisonchan/fabric-brush","last_synced_at":"2025-04-06T14:10:58.878Z","repository":{"id":39497922,"uuid":"51673029","full_name":"tennisonchan/fabric-brush","owner":"tennisonchan","description":"Crayon is a canvas brush based on an awesome framework Fabric.js","archived":false,"fork":false,"pushed_at":"2016-05-03T22:46:53.000Z","size":985,"stargazers_count":290,"open_issues_count":7,"forks_count":54,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-03-15T00:47:33.585Z","etag":null,"topics":["bower","brushes","fabric-brush","fabricjs"],"latest_commit_sha":null,"homepage":"https://tennisonchan.github.io/fabric-brush","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tennisonchan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-14T00:46:34.000Z","updated_at":"2024-03-09T10:12:25.000Z","dependencies_parsed_at":"2022-08-09T15:01:33.707Z","dependency_job_id":null,"html_url":"https://github.com/tennisonchan/fabric-brush","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tennisonchan%2Ffabric-brush","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tennisonchan%2Ffabric-brush/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tennisonchan%2Ffabric-brush/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tennisonchan%2Ffabric-brush/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tennisonchan","download_url":"https://codeload.github.com/tennisonchan/fabric-brush/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247492513,"owners_count":20947544,"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":["bower","brushes","fabric-brush","fabricjs"],"created_at":"2024-07-31T05:00:36.102Z","updated_at":"2025-04-06T14:10:58.854Z","avatar_url":"https://github.com/tennisonchan.png","language":"JavaScript","funding_links":[],"categories":["Libraries","JavaScript"],"sub_categories":["Canvas draw"],"readme":"# Fabric Brush - Canvas Brushes on Fabric.js\nFabric Brush is a collection of brushes built on an awesome canvas framework Fabric.js\n\n## Quickstart\n- [Install fabric with bower](https://github.com/kangax/fabric.js): `bower install fabric`\n- Install fabric-brush with bower: `bower install fabric-brush`\n\n## [Demo](https://tennisonchan.github.io/fabric-brush)\n\n[\u003cimg src=\"https://tennisonchan.github.io/fabric-brush/images/crayon-brush.gif\" alt=\"crayon-brush\" width=\"432\" height=\"270\"\u003e](https://tennisonchan.github.io/fabric-brush)\n[\u003cimg src=\"https://tennisonchan.github.io/fabric-brush/images/ink-brush.gif\" alt=\"ink-brush\" width=\"432\" height=\"270\"\u003e](https://tennisonchan.github.io/fabric-brush)\n[\u003cimg src=\"https://tennisonchan.github.io/fabric-brush/images/marker-brush.gif\" alt=\"marker-brush\" width=\"432\" height=\"270\"\u003e](https://tennisonchan.github.io/fabric-brush)\n[\u003cimg src=\"https://tennisonchan.github.io/fabric-brush/images/spray-brush.gif\" alt=\"spray-brush\" width=\"432\" height=\"270\"\u003e](https://tennisonchan.github.io/fabric-brush)\n\n### Examples of use\nSet the crayon brush as the free drawing brush\n\n```html\n\u003cscript src=\"bower_components/fabric.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bower_components/dist/fabric-brush.js\"\u003e\u003c/script\u003e\n\n\u003ccanvas id=\"c\"\u003e\u003c/canvas\u003e\n```\n```javascript\nvar canvas = new fabric.Canvas('c');\n\n// Crayon Brush\ncanvas.freeDrawingBrush = new fabric.CrayonBrush(canvas, {\n  width: 70,\n  opacity: 0.6,\n  color: \"#ff0000\"\n});\n\n// Ink Brush\n// canvas.freeDrawingBrush = new fabric.InkBrush(canvas);\n\n// Marker Brush\n// canvas.freeDrawingBrush = new fabric.MarkerBrush(canvas);\n\n// Spray Brush\n// canvas.freeDrawingBrush = new fabric.SprayBrush(canvas);\n```\n\nChange color of the brush into red\n```\ncanvas.freeDrawingBrush.changeColor(\"#ff0000\");\n```\nChange opacity of the brush into 0.6\n```\ncanvas.freeDrawingBrush.changeOpacity(0.6);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftennisonchan%2Ffabric-brush","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftennisonchan%2Ffabric-brush","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftennisonchan%2Ffabric-brush/lists"}