- Trending Categories
- Data Structure
- Operating System
- C Programming
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Zoom HTML5 Canvas to Mouse Cursor
The canvas always scales from its current origin. The default origin is [0,0]. If you want to scale from another point, you can first do ctx.translate(desiredX,desiredY);. This will reset the origin of the canvas to [desiredX,desiredY].
The translate() method remaps the (0,0) position on the canvas. The scale() method scales the current drawing, bigger or smaller. If you want to translate() the canvas context by your offset, you need to first scale() it to zoom in or out, and then translate() back by the opposite of the mouse offset.
These steps are given in the following example
ctx.translate(pt.x,pt.y); ctx.scale(factor,factor); ctx.translate(-pt.x,-pt.y);
- Mouse event not being triggered on HTML5 canvas? How to solve it?
- Changing the Mouse Cursor in Tkinter
- Translating HTML5 canvas
- HTML5 Canvas distorted
- HTML5 Canvas Transformation
- HTML5 Canvas to PNG File
- HTML5 Canvas fit to window
- How to move a Tkinter canvas with Mouse?
- HTML5 Canvas Transformation Matrix
- HTML5 Canvas Circle Text
- HTML5 Canvas Degree Symbol
- HTML5 Canvas layer disappears on mouse click in Fabric.js and Firefox stops responding when creating a canvas for the image?
- How to center canvas in HTML5?
- HTML5 Canvas Font Size Based on Canvas Size
- Display video inside HTML5 canvas