zacheryvaughn / GridCanvasStarter Public

Notifications You must be signed in to change notification settings
Fork 0
Star 0

This is a simple starting point for anyone who needs an infinite Snap-to-Grid canvas with basic touch gestures. I hope someone other than me can get some use out of it.

zacheryvaughn.github.io/GridCanvasStarter/

0 stars 0 forks Branches Tags Activity

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 43 Commits
LICENSE.txt		LICENSE.txt
README.md		README.md
grid-canvas.js		grid-canvas.js
image.png		image.png
index.html		index.html
styles.css		styles.css
touch-grid-canvas.js		touch-grid-canvas.js

Repository files navigation

Grid Canvas Starter

Try It: https://zacheryvaughn.github.io/GridCanvasStarter/

Features:

Centered Origin
Dynamic Gridlines
Canvas Drag-Panning
Cursor-Focused Zoom
Snap-to-Grid Dragging
Auto Z-Index Swapping

Mouse Controls:

Scroll Wheel: Zoom Canvas
Hold Right Mouse Button: Move Canvas
Click Scroll Wheel Button: Re-Center Canvas
Hold Left Mouse Button: Drag Item

Touch Gestures:

Two-Finger Pinch: Zoom Canvas
Two-Finger Touch: Move Canvas
Double-Tap: Re-Center Canvas
One-Finger Touch: Drag Item

License

This project is licensed under the MIT License - see the LICENSE file for details. Copyright (c) 2025 Zachery Vaughn

About

This is a simple starting point for anyone who needs an infinite Snap-to-Grid canvas with basic touch gestures. I hope someone other than me can get some use out of it.

zacheryvaughn.github.io/GridCanvasStarter/

canvas canvas2d pinch-to-zoom canvasjs interactive-canvas snap-to-grid zooming-canvas cursor-focused-zoom grid-canvas drag-items

Report repository

Releases

No releases published

Packages

No packages published

Languages