How to increase the width of a html canvas and getting the new space on the left of the canvas

Question

I'm building an application where I'm combining image tiles into one big image in a canvas. I want to be able to render an image to canvas and later on load more image tiles to any of the sides of the image.

Is there a way to resize the canvas and choosing where the extra space should go? Ie. such that I can add a new tile to the left of the pre-rendered image by increasing the width of the canvas on the left side of the already rendered image?

Answer 1

Let c = canvasINquestion.
c.width = newWIDTH;
c.width;

HTMLCanvasElementPrototype.width&height are both getters and setters. They are both limited by parent container and style settings.

Extra space is added from origin 0,0 upper left hand corner of canvas to end bottom right hand corner.

Though for your usage svg may be better than canvas as they faster for still images