Combine two images in one canvas

Question

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; }

What isn't working about it? Please give in your question examples of both the desired behavior and the actual behavior. — Jared Smith
– Jared Smith, Commented Oct 25, 2015 at 15:57
Code you have given looks ok. Have you checked the console for any errors? Are you sure there is data in localStorage["cddata"] and is that data the correct format? — Blindman67
– Blindman67, Commented Oct 25, 2015 at 15:57
yes it shows Uncaught TypeError: Cannot read property 'getContext' of null — Ankur Gupta
– Ankur Gupta, Commented Oct 25, 2015 at 16:38
The script has to run after the element with the id canvas has been created. Move the script block at the end of the page, just before the closing </body> tag. — Andreas
– Andreas, Commented Oct 25, 2015 at 17:15

MartyIX · Accepted Answer · 2015-10-25 16:34:53Z

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/

Collectives™ on Stack Overflow

Combine two images in one canvas

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related