javascript - 编辑两个 Canvas 元素

Question

我有两个 Canvas 元素，第一个是空的，第二个我画了一个大网格。 在第一个中，我需要添加将被拖动到网格中的文本和图像。问题是，当我向空 Canvas 添加文本时，网格消失了!我不知道这是怎么发生的。我在脚本标记中使用简单的代码:

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

var canvas2=document.getElementById("canvas2");
var ctx2=canvas2.getContext("2d");
ctx2.font = "30px Arial";
ctx2.fillText("Catalog of equipments",10,50);

我正在调用正文中的两个 Canvas :

<canvas id="canvas2" width=300 height=1000 style="border:2px solid #c3c3c3; left:320px; top:50px"></canvas>
<canvas id="canvas" width=1000 height=1000 style="border:2px solid #c3c3c3; top:50px;"></canvas>

Answer 1

在您的 jsfiddle 中您将 FillText 拼写为大写 F 而不是 fillText。我已经纠正了这个jsfiddle .

var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");
ctx2.font = "30px Arial";
ctx2.fillText ("Catalog of equipments",10,50);