Apply zoom in center of the canvas
<p>I need to apply zoom to the javascript canvas which I have badly accomplished by using the following line of code:</p>

<pre><code>ctx.scale(2,2) //doubles everything's size
</code></pre>

<p>Instead of zooming, its obviously doubling the size of the canvas and all of its elements. I'd be okay with this if I got it working like the image below shows:</p>

<p><a href="https://i.stack.imgur.com/Jn2SR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jn2SR.png" alt="enter image description here"></a> </p>

<p>Any ideas on how I could accomplish what is depicted in the picture above? I'm not using any external libraries hence making this so difficult. Thanks.</p>