{"id":24383286,"url":"https://github.com/firstandthird/scribble","last_synced_at":"2025-04-11T01:12:17.038Z","repository":{"id":58226691,"uuid":"12382189","full_name":"firstandthird/scribble","owner":"firstandthird","description":"Javascript library for turning an element into a canvas for drawing","archived":false,"fork":false,"pushed_at":"2016-12-23T17:42:27.000Z","size":39,"stargazers_count":2,"open_issues_count":2,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-11T01:12:11.775Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/firstandthird.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","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":"2013-08-26T15:07:29.000Z","updated_at":"2017-07-19T14:08:11.000Z","dependencies_parsed_at":"2022-08-31T07:51:52.403Z","dependency_job_id":null,"html_url":"https://github.com/firstandthird/scribble","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Fscribble","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Fscribble/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Fscribble/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Fscribble/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/firstandthird","download_url":"https://codeload.github.com/firstandthird/scribble/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322571,"owners_count":21084337,"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":[],"created_at":"2025-01-19T10:14:05.901Z","updated_at":"2025-04-11T01:12:17.020Z","avatar_url":"https://github.com/firstandthird.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#scribble\n\nTurn a canvas element into a scribble pad that supports bouth mouse and touch.\n\n##Installation\n\n###Bower\n\n`bower install scribble`\n\n###Manual Download\n\n- [Development]()\n- [Production]()\n\n##Usage\n\nIn order to initialize the module, you'll need to target either a `canvas` or a `div`. The module will wrap the `canvas` with a `div` or create a `canvas` inside the supplied `div`.\n\nFinally, you need to just call `scribble` on top of the jQuery element:\n\n\t$('#myAwesomeCanvas').scribble();\n\t\nAnd that's it! Well, I lied a little. You have some methods and options available!\n\n### Available options\n\n| Option            | Explanation                             | Default     |\n| ----------------- |:---------------------------------------:|:-----------:|\n| `color`           | Color in which you'll draw              | `#000000`   |\n| `size`            | Size of the stroke                      | `2`         |\n| `readMode`        | Sets whether the canvas is in read mode | `false`     |\n| `tool`            | Selected tool at beginning              | `pencil`    |\n| `stopDrawingTime` | Time to debounce stop drawing           | `500`       |\n| `cssClasses`      | Object that holds css classes to style  | *See below* |\n\n`cssClasses` have this configurable properties:\n\n* `canvas-holder` : Class for the `div` that wraps the canvas. (*Default*: `scribble-canvas-holder`)\n* `main-canvas` : Class for the main `canvas`. (*Default*: `scribble-main-canvas`)\n* `shadow-canvas` : Class for the auxiliar canvas used. (*Default*: `scribble-main-canvas`)\n\n**Note**: Aside from `cssClases`, all the options can be change with methods after initialization. \n\n### Available methods\n\nSeveral methods are exposed through Fidel for you to use that allows you to do fancy things.\n\n#### `changeColor(color)`\n\nWith this method you can… change the stroke color. What did you expect? There is no validation performed on plugin side so you should be sure you're passing a good value.\n\n#### `changeSize(size)`\n\nChanges the size of the stroke. Size has to be an integer.\n\n#### `changeReadMode(mode)`\n\nChanges the read mode to whatever value you pass. If you pass `true`, you'll enable read mode and `false` will disable it.\n\n#### `undo`\n\nThis method will undo the latest drawing.\n\n#### `redo`\n\nThis method will redo the latest undone action.\n\n#### `clear`\n\nThis method will clear the drawing canvas.\n\n#### `changeTool(tool)`\n\nThis method allows you to change \"drawing\" tool. Currently there are only two possible values. Plugin will yell if you pass something which is not implemented.\n\n* `pencil` : This is the default value and is what you expect.\n* `eraser` : This is what you expect too… It will erase as you draw.\n\n### Fired events\n\n#### `drawing.changed`\n\nWhenever the user finished drawing, this event will fire. It's *debounced* so it won't fire until the time defined on the option `stopDrawingTime` passess without any more alike events.\n\n\n#### Export methods\n\nThere are 2 exports methods with their counterpart that will import as well:\n\n* `toJSON` : It returns an object literall with all the points.\n* `loadJSON` : It loads that object and draws everything back.\n* `toDataURL` : Converts the canvas to base64 string\n* `loadDataUrl` : Loads the canvas from a base64 string\n\n##Development\n\n###Requirements\n\n- node and npm\n- bower `npm install -g bower`\n- grunt `npm install -g grunt-cli`\n\n###Setup\n\n- `npm install`\n- `bower install`\n\n###Run\n\n`grunt dev`\n\nor for just running tests on file changes:\n\n`grunt ci`\n\n###Tests\n\n`grunt mocha`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirstandthird%2Fscribble","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffirstandthird%2Fscribble","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirstandthird%2Fscribble/lists"}