How to add text to image canvas?

Asked Nov 16 '15 at 06:11

Active Nov 18 '15 at 07:31

Viewed 169 times

I try to add text to image, but I fail. Anyone can help me. thanks!

function myCanvas() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("Tshirtsrc");
  ctx.drawImage(img, 3, 3, 350, 350);
  ctx.fillStyle = "red";
  ctx.font = "18px sans-serif";
  ctx.fillText("This is a test", 50, 400);
}

edited Nov 18 '15 at 07:31

Shikkediel

5,195
16
45
77

asked Nov 16 '15 at 06:11

Binh Huynh

Can we have a code snippet or a jsfiddle? – FelisCatus Nov 16 '15 at 06:14
When are you calling this code? [maybe related](http://stackoverflow.com/questions/32880641/canvascontext2d-drawimage-issue-onload-and-cors). Also, what is the type of `#Tshirtsrc` element ? – Kaiido Nov 16 '15 at 08:22
jsFiddle : https://jsfiddle.net/9f73ha2n/1/ works fine for me – Canvas Nov 16 '15 at 08:49
@Canvas, but this is not OP's code... – Kaiido Nov 16 '15 at 10:00
@Kaiido I can only work with what the OP has given. The only difference my code has is I create a new image instead of use an `img` tag. I can change that but I don't think that is the issue. Binh have you tried looking at your console to see if you have any errors? – Canvas Nov 16 '15 at 10:21
@Canvas, no, the main difference between your code and OP's one is that you do use the `onload` event. Also, your `img` variable is actually referring to an ImageElement, which we can't be sure it is in OP's code. – Kaiido Nov 16 '15 at 10:32
@Canvas tks! I have solved it ! – Binh Huynh Nov 16 '15 at 19:55
Then why not share the solution... – Shikkediel Nov 18 '15 at 07:31
@Shikkediel or close the question... – Kaiido Nov 18 '15 at 07:35
Good point, let me follow my new "duty" in that respect. – Shikkediel Nov 18 '15 at 07:40

How to add text to image canvas?

0 Answers0