CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Ankur Gupta
Ankur Gupta

Reputation: 65

Combine two images in one canvas

I am using this code to display data of two canvas into third canvas but it is not working. I am saving the two canvas data using localstorage and passing it to third canvas

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//First canvas data
var img1 = loadImage(localStorage.getItem('cbdata'), main);
//Second canvas data
var img2 = loadImage(localStorage.getItem('cbdata1'), main);
var imagesLoaded = 0;

function main() {
    imagesLoaded += 1;
    if (imagesLoaded == 2) {
        // composite now
        ctx.drawImage(img1, 0, 0);
        ctx.globalAlpha = 0.5;
        ctx.drawImage(img2, 0, 0);
    }
}

function loadImage(src, onload) {
    var img = new Image();
    img.onload = onload;
    img.src = src;
    return img;
}

Upvotes: 0

Views: 4778

Answers (1)

MartyIX
MartyIX

Reputation: 28686

Your code works. Check that the content of localStorage.getItem is non-empty. And I also slightly modified display of the images by changing ctx.drawImage commands:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//First canvas data
var img1 = loadImage('http://ep01.epimg.net/elpais/imagenes/2015/10/21/ciencia/1445444934_907402_1445781076_portada_normal.jpg', main);
//Second canvas data
var img2 = loadImage('http://ep01.epimg.net/economia/imagenes/2015/10/22/actualidad/1445508003_507635_1445508894_portada_normal.jpg', main);

var imagesLoaded = 0;

function main() {
    imagesLoaded += 1;

    if (imagesLoaded == 2) {
        // composite now
        ctx.drawImage(img1, 0, 0, 100, 100);

        ctx.globalAlpha = 0.5;
        ctx.drawImage(img2, 100, 0, 100, 100);
    }
}

function loadImage(src, onload) {
    console.log('loadImage', src);
    var img = new Image();

    img.onload = onload;
    img.src = src;

    return img;
}

https://jsfiddle.net/4Le4g8ta/

Upvotes: 1

Related Questions