<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <canvas id="drawing" width="200" height="200" style="background:gray;">A drawing of something</canvas>
    <script>
        var drawing = document.getElementById('drawing')
        if (drawing.getContext) {
            var context = drawing.getContext('2d')

            context.font = 'bold 14px arial'
            context.textAlign = 'center'
            context.textBaseline = 'middle'
            context.fillText('12', 100, 20)

            // 如果将 textAlign 设置为"start",则 x 坐标表示的是文本左端的位置
            context.textAlign = 'start'
            context.fillStyle = 'rgba(0,0,255,0.5)'
            context.fillText('12', 100, 40)

            // 则 x 坐标表示的是文本右端的位置
            context.textAlign = 'end'
            context.fillStyle = 'rgba(255,0,0,0.5)'
            context.fillText('12', 100, 60)

            context.textAlign = 'start'
            var fontSize = 100
            context.font = fontSize + 'px arial'

            // 返回一个 TextMetrics 对象。返回的对象目前只有一个 width 属性,但将来还会增加更多度量属性
            while (context.measureText('Hello world!').width > 140) {
                fontSize--
                context.font = fontSize + 'px arial'
            }
            context.fillText('Hello world!', 10, 10)
        }
    </script>
</body>
</html>