Question

So my client-side code recieves two PNG images. One of them is half-transparent. How can i overlay first image with the second one and convert it to third PNG file to use it later?
It like using them as layers to make 1 PNG image.
Is there any way to do it or any frameworks?

Answer 1

Its really easy to do. You just need to use drawImage to draw the images onto the canvas in layers. As for saving, you use toDataURL which will return a base64 url for the image, which you can then do whatever with, open in a new window etc. However the images must come from the domain the code is running on in order to get the data url, or a security exception will be thrown. The jsfiddle example throws the security exception because Im pulling images from two random websites just as an example.

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementsByTagName("img");

canvas.width = 400;
canvas.height = 400;
ctx.drawImage(image[0],0,0);
ctx.drawImage(image[1],0,0);

// will raise security exception if not from the same domain as the code.
var newImage = canvas.toDataURL();
​

Live Demo