"Undo" canvas transformations for writing text : <p>When applying a transformation with canvas, the resulting text is also (obviously) transformed. Is there a way to prevent certain transformations, such as reflection, of affecting text?</p>

<p>For example, I set a global transformation matrix so the Y-axis points upwards, X-axis to the right, and the <code>(0, 0)</code> point is in the center of the screen (what you'd expect of a mathematical coordinate system).</p>

<p>However, this also makes the text upside-down. </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>const size = 200;

const canvas = document.getElementsByTagName('canvas')[0]
canvas.width = canvas.height = size;
const ctx = canvas.getContext('2d');

ctx.setTransform(1, 0, 0, -1, size / 2, size / 2);

const triangle = [
  {x: -70, y: -70, label: 'A'},
  {x:  70, y: -70, label: 'B'},
  {x:   0, y:  70, label: 'C'},
];

// draw lines  
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.moveTo(triangle[2].x, triangle[2].y);
triangle.forEach(v =&gt; ctx.lineTo(v.x, v.y));
ctx.stroke();
ctx.closePath();
  
// draw labels
ctx.textAlign = 'center';
ctx.font = '24px Arial';
triangle.forEach(v =&gt; ctx.fillText(v.label, v.x, v.y - 8));</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>

<p>Is there a "smart" way to get the text in "correct" orientation, apart from manually resetting transformation matrices?</p>
