HTML canvas – drawing disappear on resizing

by

You need to redraw the scene when you resize.

setting the width or height of a canvas, even if you are setting it to the same value as before, not only clears the canvas but resets the entire canvas context. Any set properties (fillStyle, lineWidth, the clipping region, etc) will also be reset.

If you do not have the ability to redraw the scene from whatever data structures you might have representing the canvas, you can always save the entire canvas itself by drawing it to an in-memory canvas, setting the original width, and drawing the in-memory canvas back to the original canvas.

Here’s a really quick example of saving the canvas bitmap and putting it back after a resize:

http://jsfiddle.net/simonsarris/weMbr/

More Related Contents:

  1. How to clear the canvas for redrawing
  2. HTML5 Canvas Resize (Downscale) Image High Quality?
  3. Resize image with javascript canvas (smoothly)
  4. HTML5 Canvas camera/viewport – how to actually do it?
  5. Capture frames from video with HTML5 and JavaScript
  6. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  7. addEventListener for keydown on Canvas
  8. Load image from url and draw to HTML5 Canvas
  9. Save canvas as jpg to desktop [duplicate]
  10. canvas getContext(“2d”) returns null
  11. clearing circular regions from HTML5 Canvas
  12. How to detect shape on a transparent canvas?
  13. HTML5 Canvas API – formatting individual words with italics
  14. Scaling an image to fit on canvas
  15. True Isometric Projection with HTML5 Canvas
  16. Resize HTML5 canvas to fit window
  17. How To Save Canvas As An Image With canvas.toDataURL()?
  18. How to add image to canvas
  19. Simulation background-size: cover in canvas
  20. HTML5 Canvas to PNG File
  21. Cross-origin data in HTML5 canvas
  22. HTML5 canvas ctx.fillText won’t do line breaks?
  23. How can I stop the alpha-premultiplication with canvas imageData?
  24. Detect if user clicks inside a circle
  25. Drawing rotated text on a HTML5 canvas
  26. HTML5 Canvas Circle Text
  27. HTML5 Dynamically create Canvas
  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