{"id":16140503,"url":"https://github.com/anthonyec/tiny-path","last_synced_at":"2025-10-14T17:28:51.747Z","repository":{"id":13947720,"uuid":"16647723","full_name":"anthonyec/tiny-path","owner":"anthonyec","description":"A small expressive image format for a small extendable image renderer for HTML5 Canvas","archived":false,"fork":false,"pushed_at":"2014-02-12T11:06:40.000Z","size":264,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T18:30:36.372Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/anthonyec.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}},"created_at":"2014-02-08T16:52:08.000Z","updated_at":"2014-02-12T11:06:40.000Z","dependencies_parsed_at":"2022-09-15T01:02:31.494Z","dependency_job_id":null,"html_url":"https://github.com/anthonyec/tiny-path","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/anthonyec/tiny-path","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonyec%2Ftiny-path","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonyec%2Ftiny-path/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonyec%2Ftiny-path/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonyec%2Ftiny-path/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anthonyec","download_url":"https://codeload.github.com/anthonyec/tiny-path/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonyec%2Ftiny-path/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279020076,"owners_count":26086806,"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-10-14T02:00:06.444Z","response_time":60,"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":[],"created_at":"2024-10-09T23:52:56.254Z","updated_at":"2025-10-14T17:28:51.732Z","avatar_url":"https://github.com/anthonyec.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"TinyPath\n========\nTinyPath is very modular by design allowing you to add and remove the functionality that you require for a given project. Give it a try and comment out the drawPath prototype. You wont be able to draw paths after that but oh well.\n\nUsing TinyPath\n==============\nA nice big sample image array is included in the project\n```javascript\nvar imageArray = [\":p\", \n    \t\t\t100, 250, \n\t\t\t\t250, 100,\n\t\t\t\t200, 300,\n\t\t\t\t150, 250,\n\t\t\t\t200, 220,\n\t\t\t\":s\",\n    \t\t\t400, 50,\n\t\t\t\t50, 50\n            ];\nvar canvas = document.getElementById(\"tiny-path-canvas\").getContext('2d');\nvar newImage = new TinyPath(canvas, imageArray).draw();\n```\n\nExtending TinyPath's Tools\n=================\nTinyPath's toolset is very limited out of the box*. That's not a problem though because you can add your own drawing functions very easily. \n\nHere are the bare bones of a drawing function:\n\n```javascript\nTinyPath.prototype.drawImage = {\n    init: function (parent) {\n\t\tparent.register(\":i\", this);\n\t\tthis.ctx = parent.canvas;\n\t},\n\n\tdraw: function (args) {\n        // Insert some image drawing code\n\t}\n}\n```\nAll TinyPath drawing tools require a init and draw function. A refrence (parent) to TinyPaths main function is always passed through as an argument to init.\n\nUse the **register** function to assign unique shortcut for TinyPath to look for in image data. \n\n```javascript\nparent.register(\":i\", this);\n```\n\nTool shortcuts need a prefix. There are 2 prefixes that you can use (this of course is extendable). Use a **\":i\"** for a drawing tool and a **\":$\"** for a tool that defines something. I've used **\":i\"** here:\n\n```javascript\ndraw: function (args) {\n    var x = args[0];\n    var y = args[1];\n    // Insert some image drawing code\n}\n```\n\nArguments are passed through to the draw function as an array. It may seem clumsy to refer to each element of the array by number but it's fine because you know how your tool data will be formated.\n\n```javascript\nvar imageData = [\":i\",\n            0, 0,\n        \t100, 100,\n\t        \"http://cagedmonkey.co.uk/wp-content/uploads/2011/04/ComputerMan.png\"\n            ];\n```\nAnd that's about all there is to it. I've included an completed **drawImage** function for good measure.\n\n```javascript\nTinyPath.prototype.drawImage = {\n    init: function (parent) {\n\t\tparent.register(\":i\", this);\n\t\tthis.ctx = parent.canvas;\n\t},\n\n\tdraw: function (args) {\n\t\tvar self = this;\n\n\t\tvar x = args[0];\n\t\tvar y = args[1];\n\t\tvar w = args[2];\n\t\tvar h = args[3];\n\t\tvar url = args[4];\n\t\tvar image = new Image();\n\n\t\timage.src = args[4];\n\n\t\timage.onload = function() {\n\t\t\tself.ctx.drawImage(image, x, y, w, h);\n\t\t};\n\t}\n}\n```\n*If you got TinyPath from a box and/or also exchanged money for it then you have probably been ripped off sorry.\n\nUsing the Loop function AKA the one know as \":x\"\n=================\nThe loop function allows you to loop any drawing function a set number of times and change the arguments on each iteration. It's really powerful and can create some amazing effects. It could probably also be dangerous. \n\nIt uses the eval function as a quick and dirty way to evaulate the arguments. Which is cool because it allows you to use any of the math functions but you can also type in any other kind of Javascript and it will excute it.\n\nSomeone once added a console.log to the arguments and it printed out a naughty word 100 times. It offended everyone watching.\n\nWithout using the **drawLoop** function:\n```Javascript\nvar image = [\t\":s\", 10, 10, 50, 50, \n\t\t\t\t\":s\", 70, 10, 50, 50, \n\t\t\t\t\":s\", 130, 10, 50, 50,\n\t\t\t\t\":s\", 190, 10, 50, 50,\n\t\t\t\t\":s\", 250, 10, 50, 50\n\t\t\t];\n```\n\nUsing the **drawLoop** function:\n```Javascript\nvar image = [\t\n\t\t\t\t\":x\", 5, \"\u003e:s\", \"10+60*i\", 10, 50, 50\n\t\t\t]\n```\nYou'll have to decide when it's best to use the loop function. It reduces file size but at the cost of a bit of performance.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonyec%2Ftiny-path","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanthonyec%2Ftiny-path","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonyec%2Ftiny-path/lists"}