Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/SandroMaglione/infinite-html-canvas

Infinite HTML <canvas> that can be zoomed and panned using touch on mobile 🤏
https://github.com/SandroMaglione/infinite-html-canvas

canvas typescript

Last synced: 3 months ago
JSON representation

Infinite HTML <canvas> that can be zoomed and panned using touch on mobile 🤏

Host: GitHub
URL: https://github.com/SandroMaglione/infinite-html-canvas
Owner: SandroMaglione
License: mit
Created: 2023-07-10T04:34:52.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-07-24T06:35:05.000Z (5 months ago)
Last Synced: 2024-07-24T07:57:50.378Z (5 months ago)
Topics: canvas, typescript
Language: TypeScript
Homepage: https://www.sandromaglione.com/techblog/infinite-canvas-html-with-zoom-and-pan
Size: 12.7 KB
Stars: 31
Watchers: 4
Forks: 7
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # `Infinite HTML `



  

    

  

  

    

  



This repository contains a **Typescript implementation of an infinite HTML** ``.

This is the same effect that many whiteboard and diagram apps use to achieve a simulated infinite canvas. These apps simulate an infinite amount of space by **using math to update the coordinates of the canvas content**.

You can read a [**step by step explanation on the blog post**](https://www.sandromaglione.com/articles/infinite-canvas-html-with-zoom-and-pan).

### 💻 Code

The complete logic is implemented inside the `InfiniteCanvas` class ([`infinite-canvas.ts`](./src/infinite-canvas.ts)).

[`main.ts`](./src/main.ts) contains an example of how to use the `InfiniteCanvas` class in a simple [Vite project](https://vitejs.dev/).

## 😀 Support

Hi, I am Sandro 👋

You can follow me on my [**Twitter**](https://twitter.com/SandroMaglione) for more updates on my projects and interests.

I also have a newsletter, in which I share tutorials, guides, and code snippets: [**Subscribe to the Newsletter here** 📧](https://www.sandromaglione.com/newsletter)