CODEWITHSUNDEEP
javascriptioshtmlcanvassafari
user1344267
user1344267

Reputation: 33

Canvas DrawImage does not work on IOS Safari

I have a canvas with an id called napkin. When I call the following function it is supposed to draw an image and the napkin canvas onto another canvas in memory. It works on every browser but IOS Safari. The operation does not seem to exceed the IOS memory cap for the canvas. I test this by calling k().toDataURL(). Any ideas?

function k() {
    var canvas = document.createElement('canvas');
    var napkin = document.getElementById("napkin");
    var img = new Image();
    img.src = picurl;
    var ctx = canvas.getContext("2d");
    var imgdata = new Image();
    imgdata.src = napkin.toDataURL();
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    ctx.globalAlpha = 0.5;
    ctx.drawImage(imgdata, 0, 0);
    return canvas;
}

Upvotes: 2

Views: 5712

Answers (1)

Mulhoon
Mulhoon

Reputation: 1902

You need to wait for the image data to load before using it...

var img = new Image();
img.onload = function(){
    // do stuff here with img
};
img.src = picurl;
// not here

Upvotes: 7

Related Questions