SOURCE

/* 
@author zhangxinxu(.com)
@licence MIT
@description http://www.zhangxinxu.com/wordpress/?p=7362
*/
CanvasRenderingContext2D.prototype.fillTextVertical = function (text, x, y) {
    var context = this;
    var canvas = context.canvas;
    var arrText = text.split('');
    var arrWidth = arrText.map(function (letter) {
                        return context.measureText(letter).width;
                    }); 
    var align = context.textAlign;
    var baseline = context.textBaseline;
    if (align == 'left') {
        x = x + Math.max.apply(null, arrWidth) / 2;
    }else if (align == 'right') { 
        x = x - Math.max.apply(null, arrWidth) / 2;
    } 
    if (baseline == 'bottom' || baseline == 'alphabetic' || baseline == 'ideographic') { 
        y = y - arrWidth[0] / 2; 
    } else if (baseline == 'top' || baseline == 'hanging') { 
        y = y + arrWidth[0] / 2; 
    } 
    context.textAlign = 'center'; 
    context.textBaseline = 'middle';        
    // 开始逐字绘制    
    arrText.forEach(function (letter, index) {
        // 确定下一个字符的纵坐标位置        
        var letterWidth = arrWidth[index];        
        // 是否需要旋转判断        
        var code = letter.charCodeAt(0);        
        if (code <= 256) {            
            context.translate(x, y);            
            // 英文字符，旋转90°            
            context.rotate(90 * Math.PI / 180);            
            context.translate(-x, -y);        
        } else if (index > 0 && text.charCodeAt(index - 1) < 256) {            
            // y修正            
            y = y + arrWidth[index - 1] / 2;        
        }        
        context.fillText(letter, x, y);        
        // 旋转坐标系还原成初始态        
        context.setTransform(1, 0, 0, 1, 0, 0);        
        // 确定下一个字符的纵坐标位置        
        var letterWidth = arrWidth[index];        
        y = y + letterWidth;    
    });    
    // 水平垂直对齐方式还原    
    context.textAlign = align;    
    context.textBaseline = baseline;
};
// 当调整浏览器窗口大小时，发生 resize 事件。
// resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。
$(window).resize(resizeCanvas);
function resizeCanvas() {
    $("#myCanvas").attr("width", document.documentElement.clientWidth - 20);
    // $("#myCanvas").attr("height",document.documentElement.clientHeight);
    // console.log('width',myCanvas.width)
    // console.log('height',myCanvas.height)
    // ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var middle = myCanvas.width / 2
    var between = myCanvas.width / 5
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.lineCap = "round";
    ctx.moveTo(middle - 2 * between, 10);
    ctx.lineTo(middle + 2 * between, 10);
    ctx.lineWidth = 0.5;
    ctx.strokeStyle = "#F0870A";
    ctx.stroke();

    ctx.beginPath();
    ctx.lineWidth = 3;
    ctx.strokeStyle = "#F0870A";

    ctx.moveTo(middle - 2 * between, 10);
    ctx.lineTo(middle - 2 * between, 30);
    ctx.font = '24px STKaiti, sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillTextVertical('anglebaby和黄晓明', middle, 50);

    ctx.moveTo(middle - between, 10);
    ctx.lineTo(middle - between, 30);

    ctx.moveTo(middle, 7);
    ctx.lineTo(middle, 30);

    ctx.moveTo(middle + between, 10);
    ctx.lineTo(middle + between, 30);

    ctx.moveTo(middle + 2 * between, 10);
    ctx.lineTo(middle + 2 * between, 30);
    ctx.stroke();

};
resizeCanvas();
// var list = [
//     {id:1,name:'aa',height:'160'},
//     {id:2,name:'bb',height:'170'},
//     {id:3,name:'cc',height:'180'},
//     {id:4,name:'dd',height:'165'},
// ]

<canvas id="myCanvas" width="355" height="366" >
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

/* * {

margin: 0;

padding: 0;

}

html,body{

width: 100%;

height: 100%;

}

canvas{

display: block;

width: 100%;

height: 100%;

} */