Drawing another image to canvas

Question

So I am creating a cordova app where I take a photo from the iphone library, draw it to canvas and add another image to it in order to save it as one photo. So far the photo I draw from the iphone photo library gets drawn without problems to the canvas, however the second image doesn't.

When I load the second image, it first gets added to a div with absolute positioning in order to move it to wherever I want. After that I get the actual image it's source and it's positions and try to draw it to canvas. The drawing of the second image happens when I call a method that also performs the canvas2ImagePlugin it's functions. In the end only the first photo without the second image gets saved.

The draw image to canvas function:

function drawImage(image_source, dx, dy)
{
    var canvas = document.getElementById('Photo');
    var image = new Image();
    image.src = image_source;  
    image.onload = function() {
        c=canvas.getContext("2d");
        c.canvas.width = window.innerWidth;
        c.canvas.height = window.innerHeight;
        c.drawImage(image,dx,dy, window.innerWidth, window.innerHeight);
    }
}

The method for drawing the second image and saving it:

function saveImage()
{
    var img = $('.ObjectImage').attr('src', $('img:first').attr('src'));
    var imagePosition = $('.ObjectImage').find('img:first').position();
    drawImage(img, imgPosition.left, imgPosition.top);

    window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){
            console.log(msg);
        },
        function(err){
            console.log(err);
        },
        document.getElementById('Photo')
        );

    alert("Image saved");
}

The window.innerWidth, window.innerHeight on the canvas is done to get the canvas in full screen of the parent div.

EDIT to the comment:

function drawImage(image_source, dx, dy)
{
    var canvas = document.getElementById('Photo');
    var image = new Image();
    image.onload = function() {
        c=canvas.getContext("2d");
        c.canvas.width = window.innerWidth;
        c.canvas.height = window.innerHeight;
        c.drawImage(image,dx,dy, window.innerWidth, window.innerHeight);
    }

    image.src = image_source;
}

Still not working

Check this question first: http://stackoverflow.com/questions/12354865/image-onload-event-and-browser-cache. I think your answer is that the onload event has already fired when you run drawImage. — Siderite Zackwehdex, Mar 21 '16 at 21:05

score 1 · Accepted Answer · edited May 23 '17 at 12:07

The drawImage function works asynchronously, it starts loading an image and exits immediately. Then, when the image loads, the canvas is updated. If you run something like:

drawImage('test.jpg',0,0);
drawImage('test2.jpg',0,0);

you will get both images updating the canvas at approximately the same time and only one will appear.

Also, what wolfhammer said is correct. If you set the size of the canvas, you clear it, so drawing one image after the other, even if they are smaller sizes and should both appear, will only show the last one. Check this link on how to solve it: Preventing Canvas Clear when Resizing Window

Further more, you are drawing all images with the width and height of the window, which doesn't make sense. Probably you want to use the width and height of the image (so this.width instead of window.innerWidth)

The problem is I can't draw the images at the same time. First the user has to select a photo, and after that is presented he has to choose an object to place it on top of that photo (so needs to happen later on) Also when I do it as the same size of the photo it somehow shows a little canvas. — DaViDa, Mar 22 '16 at 08:52

score 0 · Answer 2 · answered Mar 21 '16 at 21:36

When you set the width and height of the canvas the data on "Photo" is cleared. I've provide a resize function if resizing is really needed.

function drawImage(image_source, dx, dy)
{
    var canvas = document.getElementById('Photo');
    var image = new Image();
    image.src = image_source;  
    image.onload = function() {
        c=canvas.getContext("2d");
        //c.canvas.width = window.innerWidth;
        //c.canvas.height = window.innerHeight;
        c.drawImage(image,dx,dy, window.innerWidth, window.innerHeight);
    }
}

var can = document.getElementById('can');
var ctx = can.getContext('2d');
ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(20, 90);
ctx.lineTo(50, 10);
ctx.lineTo(80, 90);
ctx.lineTo(10, 40);
ctx.lineTo(90, 40);
ctx.lineTo(20, 90);
ctx.fill();


var btn = document.getElementById('btnResize');
btn.addEventListener('click', function() {
  resize(can, can.width * 2, can.height * 2);
});

function resize(can, w, h) {
  var ctx = can.getContext('2d');

  // copy
  var can2 = document.createElement('canvas');
  var ctx2 = can2.getContext('2d');
  can2.width = can.width;
  can2.height = can.height;
  ctx2.drawImage(can, 0, 0);
  
  // resize
  can.width = w;
  can.height = h;
  ctx.drawImage(can2, 0, 0, can2.width, can2.height, 0, 0, w, h);
}

#can {
  border:1px solid red;
}

<button id='btnResize'>Size x 2</button><br/>
<canvas id="can" width="100" height="100"></canvas>

Drawing another image to canvas

2 Answers2