canvas: bind photo into the frame

Question

Good day!

I have a problem with merging canvas images. This questions will be mark as reply I think but I didn't find solution for my problem.

So this the deal: Get 3 canvas - 1 and 2 are images(must be hidden i think), 3 - merged canvas. 1 is a frame , 2 is a photo , photo must be under frame (at css I could make it with z-index ).

Html:

<div class="container">

    <canvas id="first" width="400" height="400"></canvas>

    <canvas id="second" width="200" height="200"></canvas>

    <canvas id="third" width="400" height="400"></canvas>

</div>

JS:

var imgFirst = document.getElementById("first");
ctx1 = imgFirst.getContext('2d');
pic1 = new Image();
pic1.src = "http://www.deftune.com/wp-content/uploads/2010/10/thexx-400x400.jpg";


var imgSecond = document.getElementById("second");
ctx2 = imgSecond.getContext('2d');
pic2 = new Image();
pic2.src = "http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png";

var imgThird = document.getElementById('third');
ctx3 = imgThird.getContext('2d');
pic1.onload = function() {
    pic2.onload = function() {
        ctx3.drawImage(pic1, 0, 0, 400, 400);
        ctx3.drawImage(pic2, 100, 100, 200, 200);
    };
};

I've got jsfiddle example: http://jsfiddle.net/hh6ovneq/3/ but it not works

Answer 1

There are a couple of things that could simplify your code a lot. First of, since you are only loading image resources, use the img tag instead. Then create a callback function and trigger it when both images have loaded.

Since I am unclear what your photo is and what your frame is I currently use the inversed order that you had, but just switching the two drawImage functions should switch their order (or z-index, hopwever you want to describe it). Because your top image doesn't have transparent values, though, it will hide the bottom image as the pixels are overwritten with new colors.

The result would look something like this, which looks a lot cleaner and more readable:

 // Get all your images. var first = document.getElementById('first'); var second = document.getElementById('second'); // get canvas and context var result = document.getElementById('result'); var context = result.getContext('2d'); // create a counter to make sure all images are loaded before drawing var loaded = 0; // something to execute when loading of images has completed function combine(){ // The order of drawing will be the order of layers // The final two arguments define the size of what you want to draw context.drawImage(second, 0, 0, 400, 400); context.drawImage(first, 100, 100, 200, 200); } // Add event listeners to the images first.addEventListener('load', function(){ // increase the loaded number loaded++; // hide the image first.style.display = 'none'; // if loaded hits the total number of images, use the completion function if(loaded === 2) combine(); }, false); // (wrince, repeat for image 2) second.addEventListener('load', function(){ loaded++; second.style.display = 'none'; if(loaded === 2) combine(); }, false); 

 <div class="container"> <img id="first" width="400" height="400" src="http://www.deftune.com/wp-content/uploads/2010/10/thexx-400x400.jpg" /> <img id="second" width="200" height="200" src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" /> <canvas id="result" width="400" height="400"></canvas> </div> 

Lastly I would like to add that your nested onload function could backfire on you when the second image is loaded before the first, which would mean that the load event does not get triggered anymore. Use separate onloads and count them in order to be sure the outcome is correct.