Leinwand - Leinwand als PNG speichern und keine Leinwand zeigen

Question

Ich habe dieses Bild mit meiner Leinwand gemacht, weil ich es ändern und zwei Bilder zusammenführen musste. Allerdings möchte ich es nicht auf meiner HTML-Seite zeigen, sondern die URL der zweiten Leinwand in meinem Javascript verwenden.

Wie kann ich das tun?

Hier ist meine Geige: http://jsfiddle.net/acbo6m6o/7/

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"; 
var img2 = new Image(); 
img2.src = "https://icc-static-files.s3.amazonaws.com/ICC/photo/2017/01/31/f3a228a9-30ca-453e-99c5-ee6150c714a5/Facebook_Logo.png"; 
img.addEventListener('load', function(e) { 
    ctx.arc(150, 150, 150, 0, Math.PI * 2, true); 
    ctx.save(); 
    ctx.clip(); 
    ctx.drawImage(this, 0, 0, 300, 300); 
    ctx.restore(); 
    ctx2.drawImage(ctx.canvas, 35, 60, 230, 230); 
    ctx2.drawImage(img2, 200, 60, 75, 75); 
}, true); 

var dataURL = canvas2.toDataURL(); 

Answer 1

var dataURL = canvas2.toDataURL("image/png").replace("image/png", "image/octet-stream"); 

window.location.href=dataURL; //it save local