-1

I am new html5 developer, developed html5 web application. In this web app all animated object are showing on canvas. I want to adjust all assets with responsive UI. canvas height and width are changed as per browser, but child's of canvas size is still not changed as per canvas.

How to re-size canvas and draw object in canvas, when window size is changed ??.

So all child in canvas are re-size or scale with responsive UI.

One more thing, when i changed canvas height and width on window resize, all children are remove from canvas. I not able to understand. why assets are remove ?

Zoe
  • 27,060
  • 21
  • 118
  • 148
Harish Patidar
  • 303
  • 4
  • 13
  • 3
    The answer to this question http://stackoverflow.com/questions/5517783/preventing-canvas-clear-when-resizing-window will provide some help. Publishing some of your code will also help to pinpoint errors – jing3142 Jun 29 '13 at 08:08
  • How it is posibile : When i changed canvas height and width on window resize, all children are remove from canvas. why assets are removed ? – Harish Patidar Jun 29 '13 at 08:31
  • 3
    @HarishPatidar There are no such thing as children on a canvas. Canvas is passive and doesn't know a thing about what you draw on it. You need to track and maintain what you draw yourself and redraw on resize. –  Jun 29 '13 at 09:26

2 Answers2

3

Canvas is a bitmap region and when you draw something on canvas, only the resulting bitmap will be remembered by the browser.

When you resize the canvas resolution by changing canvas.width or canvas.height properties, canvas will be cleared and all the bitmap information will be lost. So, if you don't want to loose the bitmap information you will need some strategies to remember the bitmap information, resize the canvas and then redraw things on resized canvas.

CLICK HERE TO VIEW AN EXAMPLE

Alternatively, you could put the canvas inside a div container and resize the div via CSS:

container.style.width = newWidthValue + "px";
container.style.height = newHeightValue + "px";

This way you don't need to remember what was drawn on canvas and easily resizes the canvas, with no losses.

CLICK HERE TO VIEW AN EXAMPLE

In both examples above you could maintain the aspect ratio of the image by setting

 var stretch_to_fit = false;

or if you do not care about aspect ratio just set that variable to true

var stretch_to_fit = true;
Gustavo Carvalho
  • 2,798
  • 1
  • 19
  • 25
1

@Ken - AbdiasSoftware : On canvas if i draw one image. Like

var c = $('#respondCanvas');
var ct = c.get(0).getContext('2d');

var imageObj = new Image();

imageObj.onload = function() {
    ct.drawImage(imageObj, 0, 0);
    };

imageObj.src = 'img/ballon.jpg';

Now re-size the canvas as per window resize, that time image is not re-sized and also removed from canvas. Please tell me, why image is not resized and why it is removed from canvas ??

If I refresh browser than image is visible on canvas but image scale is still same.

Harish Patidar
  • 303
  • 4
  • 13