canvas 图片上没有绘制文字

Question

我正在使用 fabric.js 将图像从 url 绘制到 canvas:

function addImage(url) {

  canvas.clear();

  fabric.Image.fromURL(url, function(oImg) {
    oImg.selectable = false;
    canvas.add(oImg);
  });

};

有效。现在我还想用这个函数在那个图像上画一个文本：

function addText(text_to_add) {

  var ctx = canvas.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillText(text_to_add,10,50);

};

为了确保文本绘制在图像之上，我知道我需要先绘制图像，然后再绘制文本，如下所示：

<a href="#" onclick="addImage('/path/to/image/image.jpg'); addText('Hello World');">Click me to Draw image and text</a>

结果是，文本总是绘制在图像后面。我看到文本一毫秒，然后图像覆盖了文本。我希望在图像的顶部绘制文本。

我已经添加了这个 jsfiddle，但不知为何它没有运行。 fabric.js 库可能有问题。 http://jsfiddle.net/02vrr15d/

Answer 1

从 onclick 中删除 addText，并添加到 addImage

function addImage(url) {
    fabric.Image.fromURL(url, function (oImg) {
        oImg.selectable = false;
        canvas.add(oImg);
        addText('Hello World');
    });
};

Example

canvas 图片上没有绘制文字

canvas text is not drawn on an image

javascript

canvas

fabricjs