HTML5 Canvas: Zooming

by

Building on the suggestion of using drawImage you could also combine this with scale function.

So before you draw the image scale the context to the zoom level you want:

ctx.scale(2, 2) // Doubles size of anything draw to canvas.

I’ve created a small example here http://jsfiddle.net/mBzVR/4/ that uses drawImage and scale to zoom in on mousedown and out on mouseup.

More Related Contents:

  1. How do I add a simple onClick event handler to a canvas element?
  2. how to draw smooth curve through N points using javascript HTML5 canvas?
  3. How To Save Canvas As An Image With canvas.toDataURL()?
  4. How to add image to canvas
  5. Controlling fps with requestAnimationFrame?
  6. Simulation background-size: cover in canvas
  7. HTML5 Canvas to PNG File
  8. canvas.toDataURL() SecurityError
  9. Cross-origin data in HTML5 canvas
  10. Uploading ‘canvas’ image data to the server
  11. HTML5 Canvas drawImage ratio bug iOS
  12. HTML5 canvas ctx.fillText won’t do line breaks?
  13. Convert canvas to PDF
  14. How can I stop the alpha-premultiplication with canvas imageData?
  15. Is it possible to programmatically detect size limit for data url?
  16. What is the current state of the art in HTML canvas JavaScript libraries and frameworks? [closed]
  17. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  18. Using Canvas to animate a sorting algorithm in JS
  19. Detect if user clicks inside a circle
  20. Is canvas getImageData method machine/browser dependent?
  21. Limit labels number on Chart.js line chart
  22. Why does HTML Canvas getImageData() not return the exact same values that were just set?
  23. Javascript function to Rotate a base 64 image by X degrees and return new base64
  24. Drawing rotated text on a HTML5 canvas
  25. HTML5 Canvas Circle Text
  26. HTML5 Dynamically create Canvas
  27. Image Manipulation – add image with corners in exact positions
  28. Creating a Clickable Grid in a Web Browser
  29. canvas- Cropping images in different shapes
  30. HTML5 Canvas: Get Event when drawing is finished

Leave a Comment