Skip to content

Conversation

@ADARSHsri2004
Copy link
Contributor

Description

I have implemented an improved canvas rendering system where the toolbar remains fixed and unaffected by zoom or pan actions.

My Approach

  • Used a fixed-position toolbar (fixed, top-4, z-50) so it stays stable on the viewport.
  • Implemented canvas zoom and pan via CSS transforms (scale + translate) applied only to the canvas container.
  • Added a global wheel event listener with preventDefault() to disable browser-level zoom (especially on trackpads and Ctrl + scroll).
  • Ensured smooth user interaction and prevented layout shifts during zoom or pan.
  • Verified consistent behavior on both desktop mouse and laptop trackpads.

Semver Changes

  • Minor (new features, no breaking changes)

Issues

Closes the issue #38

Checklist

@Ayushivam22 Ayushivam22 merged commit f3a3026 into OPCODE-Open-Spring-Fest:main Oct 30, 2025
6 of 7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants