{"id":27972917,"url":"https://github.com/luis-herasme/dibujo","last_synced_at":"2025-08-23T01:07:11.715Z","repository":{"id":86737313,"uuid":"104383309","full_name":"luis-herasme/dibujo","owner":"luis-herasme","description":"dibujo aims to help you develop canvas projects faster.","archived":false,"fork":false,"pushed_at":"2019-04-22T16:51:51.000Z","size":10902,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T23:30:30.627Z","etag":null,"topics":["canvas","game-development","graphics","javascript","rendering-2d-graphics"],"latest_commit_sha":null,"homepage":"https://luisherasme.github.io/dibujo/","language":"TypeScript","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/luis-herasme.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null}},"created_at":"2017-09-21T18:20:41.000Z","updated_at":"2020-04-20T12:40:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"8d6719d0-0210-4305-8290-d558c5031fcf","html_url":"https://github.com/luis-herasme/dibujo","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/luis-herasme/dibujo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luis-herasme%2Fdibujo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luis-herasme%2Fdibujo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luis-herasme%2Fdibujo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luis-herasme%2Fdibujo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luis-herasme","download_url":"https://codeload.github.com/luis-herasme/dibujo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luis-herasme%2Fdibujo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271727565,"owners_count":24810561,"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-22T02:00:08.480Z","response_time":65,"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","game-development","graphics","javascript","rendering-2d-graphics"],"created_at":"2025-05-07T23:20:50.867Z","updated_at":"2025-08-23T01:07:11.707Z","avatar_url":"https://github.com/luis-herasme.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![alt text](https://raw.githubusercontent.com/LuisHerasme/DibujoJs/master/logo/dibujoJs.png)\n\n## Instalation\n\n\u003ccode\u003e\nnpm install dibujo\n\u003c/code\u003e\n\n## How to use it\n\n\u003cp\u003e\n  To start using dibujo you have to first create a dibujo entity\n\u003c/p\u003e\n\n```javascript\n  const render = new dibujo.Render()\n```\n\u003cp\u003e\n  after you have created the first  dibujo instance you can create a scene but if you don't create a scene and add graphics to dibujo     dibujo will use it's default scene to render the graphics you add.\n\u003c/p\u003e\n\n\n## Scene\n\u003cp\u003e\n  A scene is a group of graphic objects, when you create a scene you can specify the background color \n  of the scene for example:\n\u003c/p\u003e\n\n```javascript\nconst scene = new dibujo.Scene('#FF00FF')\n```\n\n\u003cp\u003e\n  When you create a scene you can add graphics to the scene\n\u003c/p\u003e\n\n```javascript\n  const rect = new dibujo.Rect({\n    position: new dibujo.Vector(10, 10),\n    width: 100,\n    height: 100,\n    color: 'blue'\n  })\n  \n  scene.add(rect)\n```\n\n\u003cp\u003e\n  And to see the scene the scene must be rendered so you have to add the scene to render in this way:\n\u003c/p\u003e\n\n```javascript\n render.setScene(scene)\n```\n\n## Graphics\n\u003cp\u003e\n  There are several kinds of Graphic objects and when you create a new graphic you have to chosse one of them\n  rigth now there are 7 kinds of diferent graphics:\n\u003c/p\u003e\n\n* Rect\n* Circle\n* Picture\n* Line\n* Poligon\n* Text\n* Arc\n\n## Picture\n\n```javascript\n  const picture = new dibujo.Picture({\n    position: new dibujo.Vector(10, 10),\n    width: 100,\n    height: 100,\n    src: './apple.png'\n  })\n```\n\n| Param | Type | Description |\n| --- | --- | --- |\n| position | \u003ccode\u003eobject\u003c/code\u003e | This object contains the position of the image |\n| src | \u003ccode\u003estring\u003c/code\u003e | This will be the location where the image is saved |\n| width | \u003ccode\u003enumber\u003c/code\u003e | The width |\n| opacity | \u003ccode\u003enumber\u003c/code\u003e | The opacity |\n| height | \u003ccode\u003enumber\u003c/code\u003e | The height |\n\n## Rect\n\n```javascript\n  const rect = new dibujo.Rect({\n    position: new dibujo.Vector(10, 10),\n    width: 100,\n    height: 100,\n    color: 'blue'\n  })\n```\n\n| Param | Type | Description |\n| --- | --- | --- |\n| position | \u003ccode\u003eobject\u003c/code\u003e | This object contains the position of the rect |\n| color | \u003ccode\u003estring\u003c/code\u003e | The color of the rect |\n| width | \u003ccode\u003enumber\u003c/code\u003e | The width |\n| height | \u003ccode\u003enumber\u003c/code\u003e | The height |\n| stroke | \u003ccode\u003eboolean\u003c/code\u003e | Draw stroke |\n| lineColor | \u003ccode\u003enumber\u003c/code\u003e | Stroke color |\n| lineWidth | \u003ccode\u003enumber\u003c/code\u003e | Line width |\n\n## Text\n\n```javascript\n  const text = new dibujo.Text({\n    position: new dibujo.Vector(10, 10),\n    content: 'Hello World'\n  })\n```\n\n| Param | Type | Description |\n| --- | --- | --- |\n| position | \u003ccode\u003ePoint\u003c/code\u003e | The coordinates of the text |\n| content | \u003ccode\u003estring\u003c/code\u003e | The content |\n| style | \u003ccode\u003eobject\u003c/code\u003e | This is the style of the text |\n\n## Line\n\n```javascript\n  const line = new dibujo.Line({\n    start: new dibujo.Vector(10, 10),\n    end: new dibujo.Vector(20, 20),\n    color: 'blue'\n  })\n```\n\n| Param | Type | Description |\n| --- | --- | --- |\n| start | \u003ccode\u003ePoint\u003c/code\u003e | The start coordinate of the line |\n| end | \u003ccode\u003ePoint\u003c/code\u003e | The end coordinate of the line |\n| color | \u003ccode\u003estring\u003c/code\u003e | This is the color of the line |\n\n## Poligon\n\n```javascript\n  const poli = new dibujo.Poligon({\n    cords: [\n      {x: 10, y: 10},\n      {x: 20, y: 20},\n      {x: 10, y: 20}\n    ],\n    color: 'blue'\n  })\n```\n\n| Param | Type | Description |\n| --- | --- | --- | \n| cords | \u003ccode\u003eArray\u003cPoint\u003e\u003c/code\u003e | Array of the vertex of the poligon |\n| fill | \u003ccode\u003eboolean\u003c/code\u003e | Fill the poligon |\n| stroke | \u003ccode\u003eboolean\u003c/code\u003e | Stroke the poligon |\n| strokeColor | \u003ccode\u003estring\u003c/code\u003e | This is the color of the lines of the poligon |\n| color | \u003ccode\u003estring\u003c/code\u003e | This is the color of the poligon |\n  \n## Circle\n\n```javascript\n  const circle = new dibujo.Circle({\n    position: new dibujo.Vector(10, 10),\n    radius: 10,\n    color: 'blue'\n  })\n```\n\n| Param | Type | Description |\n| --- | --- | --- | \n| position | \u003ccode\u003ePoint\u003c/code\u003e | Position of the circle |\n| radius | \u003ccode\u003enumber\u003c/code\u003e | Radius of the circle |\n| color | \u003ccode\u003estring\u003c/code\u003e | Color of the circle |\n| stroke | \u003ccode\u003eboolean\u003c/code\u003e | Show stroke |\n| lineWidth | \u003ccode\u003enumber\u003c/code\u003e | Width of the line |\n| lineColor | \u003ccode\u003estring\u003c/code\u003e | Color of the line |\n\n## Arc\n\n```javascript\n  const arc = new dibujo.Arc({\n    position: new dibujo.Vector(10, 10),\n    radius: 10,\n    color: 'blue'\n  })\n```\n\n| Param | Type | Description |\n| --- | --- | --- | \n| color | \u003ccode\u003estring\u003c/code\u003e | Color of the arc |\n| position | \u003ccode\u003ePoint\u003c/code\u003e | Position of the arc |\n| radius | \u003ccode\u003enumber\u003c/code\u003e | Radius of the arc |\n| lineWidth | \u003ccode\u003enumber\u003c/code\u003e | Width of the line |\n| stroke | \u003ccode\u003eboolean\u003c/code\u003e | Show stroke |\n| lineColor | \u003ccode\u003estring\u003c/code\u003e | Color of the line |\n| eAngl | \u003ccode\u003enumber\u003c/code\u003e | End angle of the arc |\n| aAngl | \u003ccode\u003enumber\u003c/code\u003e | Start angle of the arc |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluis-herasme%2Fdibujo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluis-herasme%2Fdibujo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluis-herasme%2Fdibujo/lists"}