CODEWITHSUNDEEP
javascripthtmlcanvas
Code Guy
Code Guy

Reputation: 3198

Rotating HTML canvas text

I have a rectangle with text labelled 150 along the edge

How do I rotate the text "150" to read as bottom to top. The below code makes 150 to look top to bottom along the edge.

The expected is above enter image description here

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

const x = 150;
const y = 150;
const w = 200;
const h = 150;

ctx.fillStyle = "gray";
ctx.fillRect(x + 0.5, y + 0.5, w, h);
ctx.font = "12px Comic Sans MS";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.fillText("Rectangle", x + w / 2, y + h / 2);

ctx.fillText('200', x + w / 2, y + h - 5);
ctx.save();
ctx.translate(x + w, y + h / 2);

ctx.rotate(90 * Math.PI / 180);

ctx.fillText('150', 0, 0 + w - 5);
ctx.restore();
<canvas id="myCanvas" width="400" height="300"></canvas>

Upvotes: 2

Views: 863

Answers (1)

m1k1o
m1k1o

Reputation: 2364

Notice negative translation & negative rotation.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

const x = 150;
const y = 150;
const w = 200;
const h = 150;

ctx.fillStyle = "gray";
ctx.fillRect(x + 0.5, y + 0.5, w, h);
ctx.font = "12px Comic Sans MS";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.fillText("Rectangle", x + w / 2, y + h / 2);

ctx.fillText('200', x + w / 2, y + h - 5);
ctx.save();

ctx.translate(x - w, y + h / 2);
ctx.rotate(-90 * Math.PI / 180);

ctx.fillText('150', 0, w + 15); /* 15 is width of the text itself */
ctx.restore();
<canvas id="myCanvas" width="400" height="300"></canvas>

Upvotes: 2

Related Questions