Canvas - Add the resulting image from first canvas to a second one

Question

Hi I already created a round shaped form for the first image in the first canvas, but I didn't succeed to use the dataURL of the first canvas and add it in the second canvas.

Here is my fiddle : http://jsfiddle.net/acbo6m6o/2/

var ctx = document.getElementById('canvas').getContext("2d");
var ctx2 = document.getElementById('canvas2').getContext("2d");

ctx.arc(150,150, 130, 0, Math.PI*2,true); // you can use any shape
ctx.clip();

var img = new Image();
img.addEventListener('load', function(e) {
    ctx.drawImage(this, 0, 0, 300, 300);

    img2.src=canvas.toDataURL();

}, true);
img.src="https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/10400072_76198580294_2746326_n.jpg?oh=b8cc93c35d6badfffb65ab5c9cbfce28&oe=5941AAB6";


img2.src=canvas.toDataURL();

Thank you.

Possible duplicate of [How to Copy Contents of One Canvas to Another Canvas Locally](http://stackoverflow.com/questions/4405336/how-to-copy-contents-of-one-canvas-to-another-canvas-locally) — Andreas, Feb 25 '17 at 18:08

m87 · Accepted Answer · 2017-02-25T18:21:10.137

No need to grab the dataURL of first canvas. You can draw the first canvas itself into the second canvas using the drawImage() method :

var ctx = document.getElementById('canvas').getContext("2d");
var ctx2 = document.getElementById('canvas2').getContext("2d");
var img = new Image();
img.src = "https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/10400072_76198580294_2746326_n.jpg?oh=b8cc93c35d6badfffb65ab5c9cbfce28&oe=5941AAB6";
img.addEventListener('load', function(e) {
    ctx.arc(150, 150, 130, 0, Math.PI * 2, true);
    ctx.save();
    ctx.clip();
    ctx.drawImage(this, 0, 0, 300, 300);
    ctx.restore();
    ctx2.drawImage(ctx.canvas, 0, 0);
}, true);

#canvas2 {
  background-color: lightgrey;
}

<canvas width="300" height="300" id="canvas"></canvas>
<canvas width="300" height="300" id="canvas2"></canvas>

In fact I want to keep the circle shape of the image. Because I want to add an other image above it but without the arc context. More precisely, use the url of the round image, add it in the second canvas, add a second image in the second canvas. (this is why i use toDataUrl()) — DionysoSong, Feb 25 '17 at 18:02

Canvas - Add the resulting image from first canvas to a second one

1 Answers1