{"id":13727252,"url":"https://github.com/terkelg/deakins","last_synced_at":"2025-05-06T21:29:06.247Z","repository":{"id":55955320,"uuid":"272848289","full_name":"terkelg/deakins","owner":"terkelg","description":"🎥 Small Canvas 2D Camera","archived":false,"fork":false,"pushed_at":"2024-06-11T12:54:38.000Z","size":6591,"stargazers_count":139,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-02T01:04:03.784Z","etag":null,"topics":["camera","canvas","canvas2d","game","viewport"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/terkelg.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":"2020-06-17T01:19:57.000Z","updated_at":"2025-02-19T18:35:36.000Z","dependencies_parsed_at":"2024-08-03T01:31:07.706Z","dependency_job_id":"92844d12-6e69-4b98-942a-7632a3122c51","html_url":"https://github.com/terkelg/deakins","commit_stats":{"total_commits":13,"total_committers":2,"mean_commits":6.5,"dds":0.07692307692307687,"last_synced_commit":"6fc6e41b99daad3a886fd0cadff42722a8451607"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terkelg%2Fdeakins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terkelg%2Fdeakins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terkelg%2Fdeakins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terkelg%2Fdeakins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/terkelg","download_url":"https://codeload.github.com/terkelg/deakins/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252771564,"owners_count":21801734,"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":["camera","canvas","canvas2d","game","viewport"],"created_at":"2024-08-03T01:03:46.202Z","updated_at":"2025-05-06T21:29:06.227Z","avatar_url":"https://github.com/terkelg.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg width=\"400\" src=\"https://github.com/terkelg/deakins/blob/master/deakins.gif?raw=true\"\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n# Deakins\n\u003e Small Canvas 2D Camera\n\nSmall and simple 2D viewport/camera management for Canvas.\nNamed after the legendary English cinematographer [Roger Deakins](https://www.imdb.com/name/nm0005683/) known for Blade Runner, Fargo, No Country for Old Men, and The Shawshank Redemption.\n\n\n## Install\n\n```\n$ npm install deakins\n```\n\nThis module is delivered as:\n\n* **ES Module**: [`dist/index.mjs`](https://unpkg.com/deakins/dist/index.mjs)\n* **UMD**: [`dist/deakins.umd.js`](https://unpkg.com/deakins/dist/deakins.umd.js)\n\n## Usage\n\n```js\nimport { Deakins } from 'deakins';\n\nconst canvas = document.createElement(`canvas`);\nconst context = canvas.getContext(`2d`);\n\nconst camera = new Deakins(context);\nconst player = new Player();\n\nfunction loop() {\n  camera.begin();\n\n  // Look at point in space,\n  camera.lookAt(player.position);\n\n  // Zoom\n  camera.zoomTo(500);\n\n  camera.end();\n  requestAnimationFrame(loop);\n}\n\nloop();\n```\n\nMoving the camera\n\n```js\ncamera.lookAt([x, y]);\n\ncamera.zoomTo(z);\n```\n\n## API\n\n### Deakins(context, [options])\nInitializes a new `Deakins` camera instance.\n\n#### context\nType: `CanvasRenderingContext2D`\u003cbr\u003e\n\n#### options.fieldOfView\nType: `number`\u003cbr\u003e\nDefault: `1000`\n\nThis value is used to imitate a FOV camera effect as you zoom.\n\n#### options.flipAspectRatio\nType: `boolean`\u003cbr\u003e\nDefault: `false`\n\nBy default, everything scales based on the width of the canvas. When `true`, the aspect ratio is defined by the height instead.\n\n#### options.margin\nType: `LookAtMargins`\u003cbr\u003e\nDefault: `{top: 0, right: 0, bottom: 0, left: 0}`\n\nMargins for all sides defined in screen space.\nThis is used if the `lazy` option in `lookAt` is `true`. If `true`, the camera only follows the look-at point when the point is inside the screen space margin.\n\n### camera.lookAt(point, [lazy])\n\nMove the centre of the viewport to the location specified by the point.\n\nCall this in the RAF loop to follow a player character, for example.\n\n```js\ncamera.moveTo([11, 8]);\n```\n\n#### point\nType: `[number, number]`\u003cbr\u003e\nDefault: `[0, 0]`\n\n#### lazy\nType: `boolean`\u003cbr\u003e\nDefault: `false`\n\nEnable lazy look-at. If true, the camera won't move before the look-at point is inside the margin defined in [`options.margin`](#optionsmargin). If false, the look-at point stays centered. Below is an illustration of a lazy camera.\n\n\u003cimg width=\"250\" src=\"https://github.com/terkelg/deakins/blob/master/lazy.gif?raw=true\"\u003e\n\n\n\n### camera.zoomTo(zoom)\n\nZoom to the specified distance from the 2D plane.\n\n```js\ncamera.zoomTo(500);\n```\n\n#### zoom\nType: `number`\u003cbr\u003e\nDefault: `1000`\n\n\n### camera.begin()\n\nOn each render pass, call `.begin()` before drawing to set the right transforms.\n\nAppropriate transformations will be applied to the context, and world coordinates can be used directly with all canvas context calls.\n\n```js\ncamera.begin();\n\n// Draw stuff here\n\ncamera.end();\n```\n\n\n### camera.end()\n\nCall `.end()` when you're done drawing to reset the context.\n\n\n### camera.worldToScreen(point)\n\n#### point\nType: `[number, number]`\u003cbr\u003e\n\nTransform a `point` from world coordinates into screen coordinates - useful for placing DOM elements over the scene.\n\n\n### camera.screenToWorld()\nReturns: `[number, number]`\n\nTransform and return the world space coordinate of the current look-at point.\n\nUseful if you want to project clicks and other screen space coordinates into 2D world coordinates.\n\n### camera.resize()\n\nCall this in your resize handler to make sure the viewport is updated.\n\n\n## Credit\n\nTypeScript conversion based on [camera](https://github.com/robashton/camera) by Rob Ashton with minor tweaks. Added support for more options, lazy camera movements, and slightly modified API.\n\n\n## License\n\nMIT © [Terkel Gjervig](https://terkel.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterkelg%2Fdeakins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fterkelg%2Fdeakins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterkelg%2Fdeakins/lists"}