Question

90

HTML canvas - drawing disappear on resizing

rated 0 times [ 94] [ 4] / answers: 1 / hits: 19342 / 12 Years ago, sun, june 24, 2012, 12:00:00

I have created a basic shape in HTML canvas element which works fine.

The problem occurs when I resize the canvas, all the drawing in the canvas disappears. Is this the normal behavior? or is there a function that can be used to stop this?

One way to fix this could be to call drawing function again on canvas resize however this may not be very efficient if there is huge content to be drawn.

What's the best way?

Here is the link to sample code https://gist.github.com/2983915

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

heidys

Add To Favorites

Follow

Total Points: 665

Total Questions: 102

Total Answers: 97

Location: Belarus

Member since Sat, Jul 18, 2020

4 Years ago

answered 12 Years ago janjadonb · Accepted Answer

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/