绘制文字时可以使用fillText方法或strokeText方法。
fillText方法用填充方式绘制字符串，该方法的定义如下所示：void fillText(text,x,y,[maxWidth]);
该方法接受四个参数，第一个参数text表示要绘制的文字，第二个参数
x表示绘制文字的起点横坐标，第三个参数y表示绘制文字的起点纵坐
标，第四个参数maxWidth为可选参数，表示显示文字时的最大宽度，可以防止文字溢出。
strokeText方法用轮廓方式绘制字符串，该方法的定义如下所示：void stroke text(text,x,y,[maxWidth]);
该方法参数功能与fillText方法相同。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>文字的绘制</title>
<script >
function draw(id)
{
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context=canvas.getContext('2d');
context.fillStyle= '#00f';
context.font= 'italic 30px sans-serif';
context.textBaseline = 'top';
//填充字符串
context.fillText ('珊瑚贝欢迎你', 0, 0);
context.font='bold 30px sans-serif';
//轮廓字符串
context.strokeText('珊瑚贝欢迎你', 0, 50);
}
</script>
</head>
<body οnlοad="draw('canvas');">
<canvas id="canvas" width="400" height="300" />
</body>
</html>
来源：CSDN
作者：珊瑚贝
链接：https://blog.csdn.net/chenzhao635/article/details/104136564