Search code examples
htmlcanvasautoresize

Is there a way to dynamically extend the html5 canvas without clearing what's drawn on it?

see this

when the output reaches the bottom of the page, i'd like the canvas to automatically extend so that it can keep going. I tried setting the canvas.height property, but it clears the window. Is there any way to do this?

Solution

  • What I do:
    create dummy canvas with same size as your canvas. 

    dummyCanvas.getContext('2d').drawImage(yourCanvas, 0, 0);
newCanvas = recreate(yourCanvas);
newCanvas.getContext('2d').drawImage(dummyCanvas);

    Not very pretty, especially in your situation where it would require you recreating the canvas 50+ times per second... Interested in seeing other answers... It works for me because I just resize the canvas when the clientWidth/clientHeight changes [window.onresize]