{"id":16125594,"url":"https://github.com/semibran/graphics","last_synced_at":"2025-04-06T13:12:50.442Z","repository":{"id":130492039,"uuid":"74861008","full_name":"semibran/graphics","owner":"semibran","description":":desktop_computer: Powerful JavaScript graphics library for use in the browser.","archived":false,"fork":false,"pushed_at":"2016-12-24T01:42:01.000Z","size":46,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-12T18:59:23.803Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/semibran.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-27T01:43:20.000Z","updated_at":"2016-12-20T23:52:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"dcc044dd-0da7-4701-b811-76bf8844d992","html_url":"https://github.com/semibran/graphics","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/semibran%2Fgraphics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fgraphics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fgraphics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fgraphics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/semibran","download_url":"https://codeload.github.com/semibran/graphics/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247485291,"owners_count":20946398,"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":"2024-10-09T21:30:04.910Z","updated_at":"2025-04-06T13:12:50.424Z","avatar_url":"https://github.com/semibran.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# graphics\n\u003e Powerful JavaScript graphics library for use in the browser.\n\n2D graphics library boilerplate designed for personal use. The premise is pretty simple: `Displays` render `Scenes` full of `Sprites`. In other words, if a `Scene` was a fish tank and a `Sprite` represented a fish, then the `Display` would be like a camera that would allow you to view fish in various \"exhibits\".\n\nHere's a basic example:\n\n```javascript\nimport Graphics from \"./graphics\"\n\nvar display = new Graphics.Display\ndisplay.mount(\"#app\")\n\nvar sprite = new Sprite({ size: [16, 16], fill: \"teal\" })\nsprite.position = display.center\n\nvar scene = new Graphics.Scene\nscene.add(sprite)\n\ndisplay.render(scene)\n\n```\n\n## `load(paths..., done)`\nAsynchronously loads one or more images.\n\n### Arguments\n- #### `paths...`\nPaths to the desired images.\n\n- #### `done(images...)`\n`images` refers to the requested `Image` elements corresponding to the `paths` initially provided.\n\n## `Display([aspectRatio])`\nA Display `element` for drawing `Sprite` objects.\n\n- ### `aspectRatio`\nThe display aspect ratio. Defaults to `4 / 3`.\n\n- ### `scale`\nDefines the size of one \"display pixel\". Defaults to `256`.\n\n- ### `width`\nThe amount of \"display pixels\" from the left side to the right. Depends on aspect ratio.\n\n- ### `height`\nThe amount of \"display pixels\" from the top to the bottom. Depends on aspect ratio.\n\n- ### `center`\nThe center of the display in \"display pixels\".\n\n- ### `clear([rect])`\nClears the screen at the provided rectangle `rect` (`[x, y, width, height]`), or the entire display if not provided.\n\n- ### `render([scene])`\nRedraws the sprites in `scene` or the last-rendered scene if not provided. Clears the entire display first if a new scene is provided.\n\n- ### `clearSprite(sprite, force)`\nClears sprite from display context. Returns `true` if `sprite` rect hasn't been defined, `false` if it hasn't moved since the last draw (this step can be overridden with the `force` flag), or `sprite.rect` if the sprite was successfully cleared.\n\n- ### `drawSprite(sprite)`\nDraws `sprite` onto the `display.context`. Does not clear its last drawn region beforehand.\n\n- ### `redrawSprite(sprite, force)`\nRedraws `sprite` onto the `display.context`. If the sprite hasn't changed since it was last drawn, it won't be redrawn unless the `force` flag is supplied.\n\n- ### `mount(parent)`\nMounts this display onto `parent`, which can be either an HTML element or a selector pointing to one. Returns self.\n\n## `Scene`\nA simple wrapper for `Sprite` objects. (Might be removed because it just wraps an array.)\n\n- ### `add(sprites...)`\nAdds one or more sprites to the scene.\n\n- ### `remove(sprites...)`\nRemoves one or more sprites from the scene.\n\n## `Sprite(type)`\nObjects that get drawn to the screen.\n\n- ### `type`\nThe sprite's type object.\n\n  - `size`:\n  The sprite's initial size in an an array of coordinates, like `[x, y]`.\n\n  - `shape`:\n  The shape of the sprite. Defaults to `\"rect\"`, but can also be `\"circle\"`.\n\n  - `fill`:\n  The sprite's fill color.\n\n  - `stroke`:\n  The sprite's stroke color.\n\n  - `strokeWidth`:\n  The sprite's stroke width.\n\n  - `image`:\n  An `HTMLImageElement` representing the sprite's image, which you can obtain via `Graphics.load`.\n\n  - `imageRect`:\n  The sub-rectangle defining which part of the sprite's image is shown.\n\n  - `text`:\n  Text that the sprite draws onto its `context`.\n\n  - `font`:\n  The font for the sprite's `text`. Can usually be a `String` if referencing a system font, a webfont, etc. but can also be an `ImageFont` object.\n\n- ### `canvas`\nThe sprite's canvas element.\n\n- ### `context`\nThe sprite's canvas context.\n\n- ### `position`\nThe sprite's position in an array of coordinates.\n\n- ### `size`\nThe sprite's size in an an array of coordinates.\n\n- ### `origin`\nThe origin of the sprite. Defaults to 'center', but can be one of the following:\n```javascript\n['top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right']\n```\n\n- ### `rect`\nThe last drawn position of this sprite. (What if this sprite is being drawn in multiple locations?)\n\n- ### `getRect(scale)`\nGets the sprite's \"rectangle\" (draw region) based on its position, size and origin.\n\n- ### `render()`\nRenders an image onto the sprite's context based on its data.\n\n- ### `translate(x, y)`\nOffsets the sprite's position by `x` and `y`.\n\n- ### `rotate(deg)`\nRotates the sprite by `deg`.\n\n- ### `scale(x, y)`\nScales the sprite by `x` and `y`.\n\n## `ImageFont(image, config)`\nAn image-based font used for drawing text.\n\n- ### `image`\nAn `HTMLImageElement` loaded via `Graphics.load`. Typically appears as a spritesheet consisting of letters, numbers, and other characters.\n\n- ### `config`\n  - `chars`: A `String` (not an `Array`) of characters in the order in which they appear in the `image`.\n  ```javascript\n    {\n      chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'\n    }\n  ```\n  - `charSize`: An array in the form `[width, height]` indicating the size (in pixels) for each character sprite.\n  ```javascript\n    {\n      charSize: [8, 12]\n    }\n  ```\n  - `styles`: The amount of \"styles\" (e.g. bold, italic, shadow) for this font.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsemibran%2Fgraphics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsemibran%2Fgraphics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsemibran%2Fgraphics/lists"}