{"id":19138022,"url":"https://github.com/lemonpi/context2dtracked","last_synced_at":"2026-06-14T01:32:04.661Z","repository":{"id":20735895,"uuid":"87011383","full_name":"LemonPi/Context2DTracked","owner":"LemonPi","description":"Context 2D with pen and transform tracking","archived":false,"fork":false,"pushed_at":"2022-12-10T16:47:13.000Z","size":486,"stargazers_count":0,"open_issues_count":12,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-14T21:53:11.849Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LemonPi.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":"2017-04-02T19:45:49.000Z","updated_at":"2021-01-16T04:19:32.000Z","dependencies_parsed_at":"2023-01-11T20:57:31.588Z","dependency_job_id":null,"html_url":"https://github.com/LemonPi/Context2DTracked","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/LemonPi%2FContext2DTracked","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LemonPi%2FContext2DTracked/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LemonPi%2FContext2DTracked/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LemonPi%2FContext2DTracked/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LemonPi","download_url":"https://codeload.github.com/LemonPi/Context2DTracked/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240217192,"owners_count":19766727,"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-11-09T06:41:28.423Z","updated_at":"2025-11-13T01:02:32.884Z","avatar_url":"https://github.com/LemonPi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 2D Drawing Context with tracked pen movement and transforms\nA simple wrapper around CanvasRenderingContext2D in browsers\nfor debugging purposes and to retrieve the inverse transform.\n\nAn additional feature is that we manually scale inputs rather than have\nthe underlying context do it. This has the advantage of **preserving pattern\nresolution** (with ctx.createPattern resolution normally degrades if you scale up the rendering context).\nThis means we cannot support unequal scaling for x and y on radial methods (arc and createRadialGradient).\nIn those cases we take the x scaling.\n\nOperations not entirely supported:\n- arcTo (will not be tracked, but will work)\n- ellipse\n\n## Usage\nGet by cloning the repository, or `npm install context-2d-tracked` if using in Node context.\n\n### building from source\n```bash\nnpm install\nnpm run build\n```\n\n### demo\n```bash\nnpm install\nnpm test\n```\n\n### include (browser)\n\nInclude `dist/Context2DTracked.js` in a script tag and use `Context2DTracked` as a global variable.\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cscript src=\"./Context2DTracked.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003ccanvas id=\"cv\" width=\"600\" height=\"600\" style=\"border:solid black 2px\"\u003e\u003c/canvas\u003e\n\u003cscript\u003e\nconst cv = document.getElementById(\"cv\");\n\n// can use just as a global variable in the browser\nconst ctx = new Context2DTracked(cv.getContext(\"2d\"));\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### include (CommonJS)\nOnly useful is the source is ultimately used in the browser since that's the only\nplace where canvas and rendering contexts exist. This would be the case if the\ncode's passed through `browserify` or `webpack`, for example.\n```javascript\nconst Context2DTracked = require('context-2d-tracked');\n```\n\n\n### trace\nPrint a crosshair where the pen is currently at and return the coordinates.\n```javascript\nctx.beginPath();\nctx.moveTo(20,25);\nctx.bezierCurveTo(100,200,200,100,350,400);\nctx.trace();    // print\nctx.stroke(); \n```\n\n### control points\nShow the control points of bezier and quadratic curves by passing in \nan extra argument that's non-false to the drawing methods.\n```javascript\nctx.beginPath();\nctx.moveTo(20,25);\nctx.bezierCurveTo(100,200,200,100,350,400, true);\nctx.stroke(); \n```\n\n### transform points\nTransform points in canvas coordinate to context coordinate.\nInitially, the two are the same, but after for example `ctx.scale(2,2)` canvas\ncoordinates `(100, 100)` (i.e. 100 pixels right and 100 pixels down from \nthe canvas' top left corner) becomes `(50,50)` in context coordinates.\n```javascript\ncanvas.addEventListener(\"click\", function(e){\n    e.preventDefault();\n    var x;\n    var y;\n    if (e.pageX || e.pageY) {\n        x = e.pageX;\n        y = e.pageY;\n    } else {\n        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;\n        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;\n    }\n    x -= cv.offsetLeft;\n    y -= cv.offsetTop;\n\n    console.log(\"canvas coordinates:  \", x, y);\n    var pt = ctx.transformPoint(x, y);\n    console.log(\"context coordinates: \", pt.x, pt.y);\n});\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemonpi%2Fcontext2dtracked","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flemonpi%2Fcontext2dtracked","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemonpi%2Fcontext2dtracked/lists"}