Mar 13, 2013

Line-height is ignored on Canvas


    You can't set line-height on HTML5 Canvas. You can set the font of canvas in the same manner as CSS, but number of line-height is ignored.

    I bump into a this problem.

// output statements are skipped.
var message = 'Where is a pig! I am very hungry... Give me a pig!';
var label = new Label();
label.color = 'black';
label.text = message;

// both font-size and line-height are 75px, but those are ignored.
label.font = '75px/75px fantasy';

game.currentScene.addChild(message);


On Canvas API Specification, line-height number is automatically set 'normal'.
I done deal in such a way as to using array by hand.


var messages = [
    'Where is a pig!',
    'I am very hungry...',
    'Give me a pig!'
];
for(var i = 0; i < messages.length; i++) {
    var label = new Label();
    label.color = 'black';
    label.text = message;
    label.font = '75px fantasy';
    label.y = 75 * i;  // 手動で高さを調整
    game.currentScene.addChild(message);
}

Reference
- W3C HTML Canvas 2D Context, Level 2 Nightly 
http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#text-styles