Html canvas zoom to specific region

Question

I have Html canvas code that draws the following graph. Is there an easy way of zooming the area that is outlined with red rectangle without rewriting the code? This area is always top right quarter of the graph and I also would like to leave some space for the axis.

Answer 1

So, I found the solution:

1. Draw two times bigger original canvas

2. Retrieve and put the region image on new canvas:

       var imgData = ctx.getImageData(canvas.width/2 - 20, 0, canvas.width/2 + 20, canvas.width/2 + 20);
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       canvas.width /= 2
       canvas.height /= 2
       canvas.height += 20
       ctx.putImageData(imgData, 0, 0);