在画布html5中以垂直方向绘制文本且模式为vertical-rl

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>