{"id":14384669,"url":"https://github.com/erikdahlstrand/redraw","last_synced_at":"2025-08-23T17:33:14.647Z","repository":{"id":66496091,"uuid":"41449948","full_name":"erikdahlstrand/redraw","owner":"erikdahlstrand","description":"Redraw is a JavaScript library which provides basic image annotation tools in your browser","archived":false,"fork":false,"pushed_at":"2017-02-15T21:51:12.000Z","size":3160,"stargazers_count":8,"open_issues_count":2,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-29T18:35:28.737Z","etag":null,"topics":["annotate","editor","image","javascript"],"latest_commit_sha":null,"homepage":"http://chartpen.github.io/redraw","language":"JavaScript","has_issues":false,"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/erikdahlstrand.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2015-08-26T21:08:02.000Z","updated_at":"2023-01-22T19:07:41.000Z","dependencies_parsed_at":"2023-02-21T12:46:17.082Z","dependency_job_id":null,"html_url":"https://github.com/erikdahlstrand/redraw","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikdahlstrand%2Fredraw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikdahlstrand%2Fredraw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikdahlstrand%2Fredraw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikdahlstrand%2Fredraw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erikdahlstrand","download_url":"https://codeload.github.com/erikdahlstrand/redraw/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230716610,"owners_count":18269806,"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":["annotate","editor","image","javascript"],"created_at":"2024-08-28T18:01:33.989Z","updated_at":"2024-12-21T12:30:50.784Z","avatar_url":"https://github.com/erikdahlstrand.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Redraw\nRedraw is a JavaScript library which provides basic image annotation tools in your browser.\n\n![Imgur](http://i.imgur.com/PLd9jZP.jpg)\n\n## Resources\n\n- Examples: [chartpen.github.io/redraw](http://chartpen.github.io/redraw)\n- Source: [github.com/chartpen/redraw](https://github.com/chartpen/redraw)\n- Bugs: [github.com/chartpen/redraw/issues](https://github.com/chartpen/redraw/issues)\n\n## Quick start\n\nLoad Fabric.js (1.6+) and include Redraw:\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js\" /\u003e\n\u003cscript src=\"./redraw.min.js\" /\u003e\n```\n\nCreate a new Redraw object with a reference to the image element:\n\n```html\n\u003cimg src=\"demo-image.jpg\" id=\"target\" /\u003e\n\n\u003cscript\u003e\n  var editor = new redraw.Annotation(document.getElementById('target'));\n\u003c/script\u003e\n```\n\nYou can also pass options:\n\n```javascript\nvar editor = new redraw.Annotation(document.getElementById('target'), {\n  // Canvas size\n  maxHeight: 500,\n  maxWidth: 700\n\n  // Classes to add\n  buttonClass: 'my-btn',\n  buttonActiveClass: 'my-active-btn'\n  toolbarClass: 'my-toolbar',\n\n  // Change DOM insertion order\n  toolbarFirst: true,\n\n  // Tools to show\n  tools: ['arrow', 'text', 'rectangle', 'pixelate', 'delete'],\n\n  // Tool settings\n  toolSettings: {\n    rectangle: {\n      label: 'Box',\n    },\n    pixelate: {\n      label: '\u003ci class=\"icons\"\u003eblur\u003c/i\u003e',\n      blocksize: 4\n    }\n  }\n});\n```\n\n## API\n\n### redraw.Annotation\n#### options\n\n##### buttonClass\n\nType: `string` (optional)\n\nAdds class attribute to the toolbar button elements.\nDefault button class is *redraw-btn*. Additional classes specified by buttonCss will not replace it.\n\n##### buttonActiveClass\n\nType: `string` (optional)\n\nDefault: `active`\n\nAdds class attribute to the active toolbar button elements, i.e. while the tool is active.\nDefault button class is *active*. Classes specified by buttonActiveClass *will* replace it.\n\n##### buttonDisabledClass\n\nType: `string` (optional)\n\nDefault: `disabled`\n\nAdds class attribute to a disabled toolbar button element, e.g. delete-button when there is nothing to delete.\nDefault button class is *disabled*. Classes specified by buttonDisabledClass *will* replace it.\n\n##### maxHeight\n\nType: `number` pixels (optional)\n\nMakes sure that the annotated image does not exceed this number of pixels in height.\nUseful for applying scaling to large images.\n\n##### maxWidth\n\nType: `number` pixels (optional)\n\nMakes sure that the annotated image does not exceed this number of pixels in width.\nUseful for applying scaling to large images.\n\n##### toolbarClass\n\nType: `string` (optional)\n\nAppends class attribute to the toolbar div element.\nUseful for applying custom styles.\n\n##### toolbarFirst\n\nType: `boolean` (optional)\n\nDefault: `false`\n\nAppends the toolbar div element, before the canvas element.\nUseful to ease the style setup, if the toolbar should be ontop.\n\n##### tools\n\nType: `Array` (optional)\n\nSpecifies enabled tools. If omitted all registered tools will be enabled.\nValid string values\n* 'arrow'\n* 'delete',\n* 'horizontalLine',\n* 'pixelate',\n* 'rectangle',\n* 'reset',\n* 'text'\n\n##### toolSettings\n\nType: `Object` (optional)\n\nSee toolSettings description\n\nExample:\n```javascript\nvar editor = new redraw.Annotation(document.getElementById('target'), {\n\n  // Tools to show\n  tools: ['rectangle'],\n\n  // Tool settings\n  toolSettings: {\n    rectangle: {\n      label: 'Box',\n      color: '#f00'\n    }\n  }\n});\n```\n\n### toolSettings\n\n#### arrow\n\nThe tools that draws an arrow.\n##### activeColor\n\nType: `string` (optional)\n\nDefault: `#55f`\n\nSets the color of the element in canvas, before it is complete, i.e. while it is being dragged.\n\n##### color\nType: `string` (optional)\n\nDefault: `#33e`\n\nSets the color of the element in canvas.\n\n##### label\n\nType: `string` (optional)\n\nDefault: `Arrow`\n\nSets the value of the button element, i.e. the text of the button.\n\n##### size\n\nType: `number` pixels (optional)\n\nDefault: `15`\n\nSets the length/width of the pointed end of the arrow.\n\n##### lineWidth\n\nType: `number` pixels (optional)\n\nDefault: `4`\n\nSets the width of the line.\n\n#### delete\n\nThe tools that allows for removal of canvas elements.\n\n##### label\nType: `string` (optional)\n\nDefault: `Delete`\n\nSets the value of the button element, i.e. the text of the button.\n\n#### horizontalLine\n\nThe tools that places horizontal lines.\n\n##### activeColor\nType: `string` (optional)\n\nDefault: `#55f`\n\nSets the color of the element in canvas, before it is complete, i.e. while it is being dragged.\n\n##### color\nType: `string` (optional)\n\nDefault: `#33e`\n\nSets the color of the element in canvas.\n\n##### label\nType: `string` (optional)\n\nDefault: `Horizontal Line`\n\nSets the value of the button element, i.e. the text of the button.\n\n#### pixelate\n\nThe tools that blurs image content, by applying a pixelate-filter.\n\n##### activeColor\nType: `string` (optional)\n\nDefault: `#33e`\n\nSets the color of the element in canvas, but only before it is complete and the pixelate effect is applied.\n\n##### activeOpacity\nType: `number` (optional)\n\nDefault: `0.3`\n\nSets the color of the marker element in canvas, before it is complete, i.e. while it is being dragged.\n\n##### label\nType: `string` (optional)\n\nDefault: `Pixelate`\n\nSets the value of the button element, i.e. the text of the button.\n\n##### blocksize\nType: `number` pixels (optional)\n\nDefault: `8`\n\nSets the size of the mozaic pattern.\n\n#### rectangle\n\nThe tools that draw a rectangle.\n\n\n##### activeColor\nType: `string` (optional)\n\nDefault: `#55f`\n\nSets the color of the element in canvas, before it is complete, i.e. while it is being dragged.\n\n##### activeOpacity\nType: `number` (optional)\n\nDefault: `0.3`\n\nSets the opacity of the element in canvas, before it is complete, i.e. while it is being dragged.\n\n##### color\n\nType: `string` (optional)\n\nDefault: `#33e`\n\nSets the color of the rectangle element in canvas.\n\n##### label\n\nType: `string` (optional)\n\nDefault: `Rectangle`\n\nSets the value of the button element, i.e. the text of the button.\n\n##### opacity\n\nType: `number` (optional)\n\nDefault: `0.5`\n\nSets the opacity (transparancy) of the element in canvas.\n\n#### reset\n\nThe tools clears all elements of the canvas (except the annotated image itself).\n\n##### label\nType: `string` (optional)\n\nDefault: `Reset`\n\nSets the value of the button element, i.e. the text of the button.\n\n#### text\n\nThe tools that adds a text-box to the canvas.\n\n##### activeColor\nType: `string` (optional)\n\nDefault: `#55f`\n\nSets the color of the element in canvas, while it's being dragged.\n\n##### label\nType: `string` (optional)\n\nDefault: `Reset`\n\nSets the value of the button element, i.e. the text of the button.\n\n##### color\nType: `string` (optional)\n\nDefault: `#33e`\n\nSets the color of the element in canvas.\n\n##### fontFamily\nType: `string` (optional)\n\nDefault: `arial`\n\nSets the font of the text-box element in canvas.\n\n##### fontSize\nType: `number` pixels (optional)\n\nDefault: `18`\n\nSets the font size of the text-box element in canvas.\n\n## Style\n\nThere is no styling included in redraw by default, but css-classes are applied.\n\n### CSS\n\n#### redraw-btn\n\nThis class attribute is applied to buttons of the toolbar, if not overridden by option `buttonClass`.\n\n#### redraw-parent\n\nThis class attribute is applied to the top level div element, that wraps both canvas and toolbar.\n\n#### redraw-toolbar\n\nThis class attribute is applied to the div element, wrapping the toolbar buttons.\n\n#### redraw-canvas\n\nThis class attribute is applied to the div element, wrapping the canvas.\n\n## License\n\nCoded with :heart: by Björn Svanmo and published under the [MIT License](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikdahlstrand%2Fredraw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferikdahlstrand%2Fredraw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikdahlstrand%2Fredraw/lists"}