在画布上渲染文本不起作用

Question

我有类似的东西（这里也是jsfiddle）：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");


canvas.width = 400;
canvas.height = 300;

ctx.beginPath();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 400, 300);

ctx.fillStlye = "white";
ctx.font = "16px Arial, sans-serif";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("asdf", 20, 20);

现在代码应该在矩形上绘制“asdf”，但事实并非如此。为什么呢？

Answer 1

因为代码中有一个拼写错误导致fillStyle无法更改（因为您基本上只是向ctx添加新属性也不会出现任何错误）：

ctx.fillStlye = "white";
          ^^

应该是：

ctx.fillStyle = "white";

<强> Modified fiddle here