How to scale an image to larger in html5, canvas, javascript?

Question

I know this might sound newbie but there are many answers out there that just doesn't do it.

I have a .png image with size 10,000 pixel in height and want to scale it to 30,000 pixel in height. It can just be a simple stretch to the height.

  img = new Image(800, 30000);
  img.src = path;

But when it comes out, it doesn't scale the image at all. It seems to be expanding an image at anything greater than 10,000 pixel as invisible pixel.

Does another know how to do it properly?

Any advice will be grateful. Thanks.

Answer 1

You will have problems doing this. The only reason you would want to scale it to that size is if you want to print it. Of you need to print it then you will need another solution.

Reality The fact is that you can only ever see as much as the display can present, so creating an image this large is a waste of resources and a battle against the limits of the browsers.

Solution. Load the image as usual but do not add it to the DOM. Add a div element with the height set to 30000px, this will supply a scroll bar. Then create a canvas with height and width set to window.innerWidth and window.innerHeight and add the CSS style { position:fixed; top:0px; right:0px; } { position:fixed; top:0px; right:0px; } { position:fixed; top:0px; right:0px; } to that canvas this will fix the position of the canvas but still give a scroll bar via the background div.

Use requestAnimationFrame to call your function that checks for updated scroll position and if changed render the appropriate part of the image on the canvas.

Using this method will allow it to appear that the image is very large, yet you only ever display what can be seen. If you chose you can implement your own scroll and with a little fancy math you can make the image as large as the universe. Think of google maps at max zoom what is the size of that? it does not matter because you can only ever see part of it so they only ever render the part you can see.