HTML5 Javascript：将文本保存到画布上吗？

Question

If you take a look at what I've done so far it'll help explain what I'm after, as I'm terrible at explaining normally haha. http://logomakr.bugs3.com/

On my drawing app I've implemented the ability to add text to the canvas, however, it's not recording/saving onto the canvas like the shapes are. When I've tried looking into it, it seems like HTML Canvas text tends to place over the canvas not on it. I even copied a simple:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

to test it out, that displays on the canvas all fine and dandy but soon as you draw a shape it vanishes and even just pressing the save button the text isn't on the png?

Is there like an alternative or a way round it?

(Let me know if you need to see the code although I'm sure you's will be able to view source on website)

Thank you in advance!

Answer 1

For drawn shapes (rects, circles, lines) you're using the mouseup event to trigger saving the "tempCanvas" to the "realCanvas".

But for text, you're not saving the tempCanvas to the realCanvas at all. Then when you clear the tempCanvas for additional drawings, the text is blown away. Maybe you could add a [save text] button so the user can trigger saving text's tempCanvas to realCanvas.