{"id":15713016,"url":"https://github.com/timothygu/react-hybrid-canvas","last_synced_at":"2025-03-30T18:28:39.017Z","repository":{"id":66192516,"uuid":"74226752","full_name":"TimothyGu/react-hybrid-canvas","owner":"TimothyGu","description":"Component for SVG-backed canvas","archived":false,"fork":false,"pushed_at":"2016-11-20T21:13:17.000Z","size":13,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-13T13:51:22.207Z","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/TimothyGu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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-19T18:21:56.000Z","updated_at":"2019-06-21T17:28:05.000Z","dependencies_parsed_at":"2023-02-22T07:30:55.711Z","dependency_job_id":null,"html_url":"https://github.com/TimothyGu/react-hybrid-canvas","commit_stats":{"total_commits":1,"total_committers":1,"mean_commits":1.0,"dds":0.0,"last_synced_commit":"ee37a8388cf2969bd427babe853d79851887f516"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimothyGu%2Freact-hybrid-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimothyGu%2Freact-hybrid-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimothyGu%2Freact-hybrid-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimothyGu%2Freact-hybrid-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TimothyGu","download_url":"https://codeload.github.com/TimothyGu/react-hybrid-canvas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246361576,"owners_count":20764956,"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-03T21:20:59.652Z","updated_at":"2025-03-30T18:28:38.990Z","avatar_url":"https://github.com/TimothyGu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-hybrid-canvas\n\nReact component for scalable canvases backed by SVGs.\n\nOftentimes one would want to import an SVG into an HTML canvas, in order to do\nfurther raster processing with it. In React, this can be easily accomplished\nwith refs and lifecycle methods that run after the DOM is updated. However, the\ndrawback with such an approach is that since canvas operates upon bitmap, the\nkey benefit of using SVG – the ability to scale according to device pixel\ndensity – is gone.\n\nThis React component solves the scaling problem, first by scaling the canvas\nusing [`devicePixelRatio`] when the component is mounted initially, and second\nby listening for pixel ratio changes using [`matchMedia`] and [`resolution`]\nCSS media query (with [`dppx`] units), in order to redraw the canvas\nautomatically when a change is detected (e.g. when the user zooms in, or when\nthe window is moved to another display).\n\n## Props\n\nThe following explicitly declared props apply to the underlying canvas. If you\npass a prop that is not documented below, it will be passed along to the\ncanvas anyway.\n\n- `width`, `height` [`Number`]: Base dimensions of the canvas. The actual\n  canvas size will be scaled according to [`devicePixelRatio`]. **Default:**\n  `300`×`150`.\n- `imageSmoothingEnabled` [`Boolean`]: Whether or not image smoothing is to be\n  enabled when rendering SVG image to the canvas. This is directly mapped to\n  [`CanvasRenderingContext2D`]'s [`imageSmoothingEnabled`] parameter.\n  **Default:** `true`.\n- `imageSmoothingQuality` [`String`]: Quality of image smoothing\n  when rendering SVG image to the canvas. This is directly mapped to\n  [`CanvasRenderingContext2D`]'s [`imageSmoothingQuality`] parameter.\n  **Default:** `'high'`.\n\nThese props control behaviors of this React component.\n\n- `autoScale` [`Boolean`]: Listen for device pixel ratio changes and\n  automatically rescale the canvas to accomodate. **Default:** `true`.\n- `drawDimensions` \u003ccode\u003e[Array]\u0026lt;[Number]\u003e\u003c/code\u003e: Unscaled dimensions\n  passed to [`drawImage`], as an array of numbers. This component will\n  automatically scale the actual dimensions used based on the current pixel\n  ratio. The two-argument signature for [`drawImage`] is not supported as it\n  does not support scaling. **Default:** `[0, 0, width, height]`, where `width`\n  and `height` correspond to the props which fills the entire canvas.\n- `predraw` [`Function`]: This function is called every time a redraw is\n  requested, *before* the SVG has already been drawn. It has the signature\n  `(ctx, scaleFactor)` where `ctx` is a [`CanvasRenderingContext2D`] associated\n  with the canvas, and `scaleFactor` is a [`Number`] representing the requested\n  scale.\n- `draw` [`Function`]: This function is called every time a redraw is\n  requested, *after* the SVG has already been drawn. It has the signature\n  `(ctx, scaleFactor)` where `ctx` is a [`CanvasRenderingContext2D`] associated\n  with the canvas, and `scaleFactor` is a [`Number`] representing the requested\n  scale. **Here is where you can do extra processing on the SVG canvas.**\n- `onRatioChange` [`Function`]: This function is called when the scale factor\n  for the canvas changes due to changing device pixel ratio. It has the\n  signature `(scaleFactor)`, where `scaleFactor` is equal to the current value\n  of [`devicePixelRatio`].\n\nThe SVG used in rendering can be supplied in two ways. If both are specified,\n`svgString` takes precedence. If neither is specified, an empty SVG is used as\nthe default.\n\n- `svgString` [`String`]: SVG to be rendered on the canvas as a string. This is\n  the preferred method when the SVG is entirely static.\n- `svgElement` [`ReactElement`]: SVG to be rendered on the canvas as\n  a React element.\n\n## Instance properties\n\nIf you get a ref of the `HybridCanvas` element, you will be able to access the\nfollowing properties and methods.\n\n### Properties\n\n- `canvas` [`HTMLCanvasElement`]: The underlying canvas DOM object.\n- `ctx` [`CanvasRenderingContext2D`]: The 2D rendering context associated with\n  `canvas`.\n\n### Methods\n\n- `toBlob` \u003ccode\u003e(scaleFactor: [Number]) → [Promise]\u0026lt;[Blob]\u003e\u003c/code\u003e: Convert\n  the canvas to an image Blob, scaled at the provided `scaleFactor`. This uses\n  the [`toBlob`] method of an [`HTMLCanvasElement`], but since the requested\n  `scaleFactor` may be different from the actual one of the `canvas` property,\n  a temporary canvas may be used.\n\n[`matchMedia`]: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia\n[`resolution`]: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#resolution\n[`dppx`]: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution#dppx\n[`devicePixelRatio`]: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio\n[`HTMLCanvasElement`]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement\n[`toBlob`]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob\n[CanvasRenderingContext2D]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D\n[`CanvasRenderingContext2D`]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D\n[`imageSmoothingEnabled`]: https://html.spec.whatwg.org/multipage/scripting.html#image-smoothing:dom-context-2d-imagesmoothingenabled\n[`imageSmoothingQuality`]: https://html.spec.whatwg.org/multipage/scripting.html#image-smoothing:dom-context-2d-imagesmoothingquality\n[`drawImage`]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage\n[Blob]: https://developer.mozilla.org/en-US/docs/Web/API/Blob\n[`ReactElement`]: https://facebook.github.io/react/docs/rendering-elements.html\n[Number]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type\n[`Number`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type\n[`Boolean`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type\n[`String`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type\n[`Function`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function\n[Array]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array\n[Promise]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimothygu%2Freact-hybrid-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimothygu%2Freact-hybrid-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimothygu%2Freact-hybrid-canvas/lists"}