0

How do I render a canvas as an image with multiple image drawn on it and the image which I used to draw is cross origin.

While doing toDataURL() the image which I draw isn't coming. Thanks in advance

this is my code

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
baseimage = new Image();
baseimage.src = '' + data.picture.data.url + '';
baseimage.onload = function() {
    ctx.drawImage(baseimage, 1, 1);
}
var dataURL = canvas.toDataURL("image/png");
Neil
  • 14,063
  • 3
  • 30
  • 51
sundar
  • 124
  • 10
  • You've got to make this call once all your images are drawn, i.e after the last onload event has fired. – Kaiido Apr 07 '17 at 13:53
  • I'm doing this only after the images are drawn – sundar Apr 07 '17 at 13:55
  • No. Your image loads asynchrounously. Everything outside the onload callback will be called first, including the toDataURL call, then, only when the js will be freed and the image will have finished to load, your image will be drawn. – Kaiido Apr 07 '17 at 13:57
  • 1
    Han! This is a better dupe target : http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – Kaiido Apr 07 '17 at 14:00
  • Thanks for your help my friend.@kaiido – sundar Apr 07 '17 at 14:01

0 Answers0