Draw a text with orientation is upright and mode is vertical-rl in canvas html5

Question

I have a text in html with below css:

.overlay-imageOrientation-left {
  font-size: 20px;
  text-orientation: upright;
  writing-mode: vertical-rl;
  color: #ffffff;
  position: absolute;
  top: 45%;
  left: 3px;
}

How can i draw this text in canvas html5 with text-orientation: upright and writing-mode: vertical-rl ?

Answer 1

Normally, you would have to draw each character separately:

ctx = c.getContext('2d');
// set the font to 20px and line-height to 1
ctx.font = '20px/1 sans-serif';
ctx.textAlign = "center";
var str = "Hello World";
for(var i=0; i<str.length; i++){
  ctx.fillText(str[i], 20, 20*(i+1));
}

<canvas id="c" height=300></canvas>

But some browsers (actually only Firefox for now, I will open an issue on chrome about it), also do accept that you set these exact CSS properties on the canvas element directly:

ctx = c.getContext('2d');
ctx.font = '20px/1 sans-serif'
ctx.fillText('Hello World', 20,20);

canvas{
  text-orientation: upright;
  writing-mode: vertical-rl;
}

<canvas id="c" height=300></canvas>