21943

Resize and scale HTML5 Canvas and contents

Question:

I am working on an application that incorporates a drawing interface (like Paint or Photoshop) as an HTML5 canvas element.

I would like to be able to dynamically resize the canvas element and the pixel data on it to simulate zoom functionality. My thoughts are having some kind of a viewport which contains the canvas element. I could then resize the canvas and its contents inside of the viewport (which stays the same size).

How would I best implement this functionality?

Answer1:

You can do this very easily by seperating the display from the drawing surface by introducing another canvas. Create a hidden canvas using

var canvas = document.createElement('canvas');

Then draw your entire scene to this canvas. Then draw the contents of this canvas to another canvas that is actually visible to the user using the drawImage method (which may also receive a canvas instead of an image). If you want to draw your scene zoomed in, you can do this by making the source rectangle (the sy, sx, sw and sh parameters on drawImage) on the hidden canvas smaller, when drawing it to the visual canvas. This will give you the zooming effect.

However, if you completely redraw each frame on your canvas anyway, you may also simply have a look at the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-scale" rel="nofollow">scale method</a> of the canvas object.

Answer2:

I'm having success using transform: scale() on a canvas element and its contents. However in situations where the canvas element needs to be brought in with an iframe and the transform: scale happens on the iframe it works on safari but not mobile safari. Relevant link below

<a href="https://stackoverflow.com/questions/11265483/inconsistencies-when-transform-scale-on-iframe-containing-canvas" rel="nofollow">https://stackoverflow.com/questions/11265483/inconsistencies-when-transform-scale-on-iframe-containing-canvas</a>

Recommend

  • When do we need multiple Dispatcher Servlet?
  • Clean up PHP/HTML pages
  • Doze and App Standby mode in Android 6.0
  • Remove annotation while keeping plot matplotlib
  • Javascript DOM - aligning a text element to the center?
  • Need help in optimizing a drawing code …
  • Create cameraview (mask) on surfaceview in android
  • “Unable to evaluate the expression” in Visual Studio 2012 Debug Mode
  • How to get phone heading for augmented reality?
  • responsive table with variable column number
  • Algorithm for placing nodes on a circle considering their distance to eachother
  • JFrame attached on the side of another JFrame
  • How to initialize global variable at each class invocation?
  • how to replace TreeView's selected node with newly created node
  • Background not visible in surface view
  • Embedding a Google map
  • WP7 difficulties binding data to listbox itemssource - won't refresh
  • Jquery UI Sortable, move item automatically
  • Ruby 1.8.6 Array#uniq not removing duplicate hashes
  • apply a javascript function to draggable copy
  • Configure Spring's MappingJacksonHttpMessageConverter
  • Aptana 3 remove bundle (jquery)
  • netsh acl setting (need alternative method - registry settings?)
  • blade.php method outputting it's result to the form
  • AppleScript : find open tab in safari by name and open it
  • Django simple Captcha “No module named fields” error
  • Sencha Touch 2.0 Controller refs attribute not working?
  • Android full screen on only one activity?
  • Change multiple background-images with jQuery
  • Android screen density dpi vs ppi
  • C# - Serializing and deserializing static member
  • Bug in WPF DataGrid
  • Incrementing object id automatically JS constructor (static method and variable)
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • Change an a tag attribute in JavaScript based on screen width
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • align graphs with different xlab
  • Traverse Array and Display in markup
  • How to set the response of a form post action to a iframe source?