title: How to get pixel range in scaled canvas?
body: <p>In the following code, I am drawing a circle on the center, but because it is scaled, the circle is in bottom right corner!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById('mycanvas');
  context = canvas.getContext("2d");
  context.canvas.width = 400;
  context.canvas.height = 200;
  
  context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
  
  var scale = 2;
  context.scale(scale, scale);
  context.beginPath();
  context.fillStyle = "#ff2626"; // Red color
  context.arc(context.canvas.width / 2, context.canvas.height / 2, 10, 0, Math.PI * 2); //center
  context.fill();
  context.closePath();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
   border: solid 1px #ccc;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;HTML&gt;
  &lt;body&gt;
  
  &lt;canvas id="mycanvas"&gt;&lt;/canvas&gt;
  
  &lt;/body&gt;
  &lt;/HTML&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you probably know, canvas width and height is not related to what is drawing inside it, especially when you scale it. in other word, when you scale a canvas using <code>context.scale(scale_x, scale_y);</code> it will scale all shapes inside the canvas. I am wondering to know, is there any way to get the canvas pixel range?</p>
  
  <p>I want to know the X on left edge and right edge and the Y on top and bottom edges when a canvas is scaled.</p>