Combining Two or More Canvas Elements with Some Sort of Blending

Combining two or more Canvas elements with some sort of blending

Of course you can, and you don't need any funny libraries or anything, just call drawImage with a canvas as the image.

Here is an example where I combine two canvas elements onto a third:

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

ctx.fillStyle = 'rgba(255,0,0,.4)';
ctx.fillRect(20, 20, 20, 80);
ctx.fillStyle = 'rgba(205,255,23,.4)';
ctx.fillRect(30, 30, 40, 50);
ctx.fillStyle = 'rgba(5,255,0,.4)';
ctx.fillRect(40, 50, 80, 20);

var can2 = document.getElementById('canvas2');
var ctx2 = can2.getContext('2d');

ctx2.beginPath();
ctx2.fillStyle = "pink";
ctx2.arc(50, 50, 50, 0, Math.PI * 2, 1);
ctx2.fill();
ctx2.beginPath();
ctx2.clearRect(20, 40, 60, 20);

var can3 = document.getElementById('canvas3');
var ctx3 = can3.getContext('2d');

ctx3.drawImage(can, 0, 0);
ctx3.drawImage(can2, 0, 0);

<canvas id="canvas1" width="200" height="200" style="border: 1px solid black"></canvas>
<canvas id="canvas2" width="200" height="200" style="border: 1px solid black"></canvas>
<canvas id="canvas3" width="200" height="200" style="border: 1px solid black"></canvas>

Trying to combine 2 HTML canvases into 1 with .drawImage function in input canvas

Yes, you can easily combine 2 canvases into 1 even with your image, and to accomplish this you just need to put this ( ctx3.drawImage(can, 0, 0) ) piece of code inside the img1.onload function.

var can = document.getElementById('canvas1');var ctx = can.getContext('2d');
var img1 = new Image();img1.src = 'http://cdn2.boothedog.net/wp-content/uploads/2011/07/boo-the-dog-naked-wednesday--150x150.jpg';img1.onload = function() {    ctx.drawImage(img1, 0, 0);    ctx3.drawImage(can, 0, 0);};
var can2 = document.getElementById('canvas2');var ctx2 = can2.getContext('2d');
ctx2.beginPath();ctx2.fillStyle = "pink";ctx2.arc(50, 50, 50, 0, Math.PI * 2, 1);ctx2.fill();ctx2.clearRect(20, 40, 60, 20);
var can3 = document.getElementById('canvas3');var ctx3 = can3.getContext('2d');
ctx3.drawImage(can2, 200, 25);

<canvas id="canvas1" width="350" height="150" style="border: 1px solid black"></canvas><canvas id="canvas2" width="350" height="150" style="border: 1px solid black"></canvas><canvas id="canvas3" width="350" height="150" style="border: 1px solid black"></canvas>

How to combine 3 canvas HTML elements into 1 image file using javascript/jquery?

So you've rendered your canvases, but it's not clear how you want to combine them - overlaid, side-by-side? In either case you can use Canvas.context.drawImage() to add them to a new canvas object, and then use the Canvas.toDataURL() method to return the, erm, dataURL of the new canvas.

Something like this perhaps...

/* assumes each canvas has the same dimensions */
var overlayCanvases = function(cnv1, cnv2, cnv3) {
    var newCanvas = document.createElement('canvas'),
        ctx = newCanvas.getContext('2d'),
        width = cnv1.width,
        height = cnv1.height;

    newCanvas.width = width;
    newCanvas.height = height;

    [cnv1, cnv2, cnv3].forEach(function(n) {
        ctx.beginPath();
        ctx.drawImage(n, 0, 0, width, height);
    });

    return newCanvas.toDataURL();
};

/* assumes each canvas has the same width */
var verticalCanvases = function(cnv1, cnv2, cnv3) {
    var newCanvas = document.createElement('canvas'),
        ctx = newCanvas.getContext('2d'),
        width = cnv1.width,
        height = cnv1.height + cnv2.height + cnv3.height;

    newCanvas.width = width;
    newCanvas.height = height;

    [{
        cnv: cnv1,
        y: 0
    },
    {
        cnv: cnv2,
        y: cnv1.height
    },
    {
        cnv: cnv3,
        y: cnv1.height + cnv2.height
    }].forEach(function(n) {
        ctx.beginPath();
        ctx.drawImage(n.cnv, 0, n.y, width, n.cnv.height);
    });

    return newCanvas.toDataURL();
};

/* USAGE */
var dURL1 = overlayCanvases(canvas1,canvas2,canvas3);
var dURL2 = verticalCanvases(canvas1,canvas2,canvas3);

The overlayCanvases() function will place the canvases on top of each other, so the order of the arguments is important. The verticalCanvases() will align the canvas vertically and in descending order. The important thing to notice here is that Canvas.context.drawImage() allows you to paint one canvas into another - relative positioning can be jiggled to suit your purposes.

Functions above Fiddled : https://jsfiddle.net/BnPck/cyLrmpjy/

HTML5 Canvas : How do I merge 2 canvas into 1 (of which 1 is draggable)

You can use drawImage (you can pass in the canvas element directly) to draw the Logo Canvas onto the Main Canvas, and then just use toDataURL on the Main Canvas to output it.

Or if you want to preserve the Main Canvas, you can create another canvas and draw onto it the Main Canvas, and then the Logo Canvas.

---

UPDATE

Here is the code (sorry for long data sources - tainted canvas): https://jsfiddle.net/xmmo9m3t/

var bg = document.getElementById('bg'); var bgctx = bg.getContext('2d'); bgctx.drawImage(document.getElementById('bgimg'), 0, 0);  var canvas = document.getElementById('logo'); var logo_context = canvas.getContext('2d');
 make_logo();
 function make_logo() {   logoimage = document.getElementById('logoimg');   logoimage.onload = function() {     logo_context.drawImage(logoimage, 0, 0);   } } var canvasOffset = $("#logo").offset(); var offsetX = canvasOffset.left; var offsetY = canvasOffset.top; var canvasWidth = canvas.width; var canvasHeight = canvas.height; var isDragging = false;
 function handleMouseDown(e) {   canMouseX = parseInt(e.clientX - offsetX);   canMouseY = parseInt(e.clientY - offsetY);   // set the drag flag   isDragging = true; }
 function handleMouseUp(e) {   canMouseX = parseInt(e.clientX - offsetX);   canMouseY = parseInt(e.clientY - offsetY);   // clear the drag flag   isDragging = false; }
 function handleMouseOut(e) {   canMouseX = parseInt(e.clientX - offsetX);   canMouseY = parseInt(e.clientY - offsetY);   // user has left the canvas, so clear the drag flag   isDragging = false; }
 function handleMouseMove(e) {   canMouseX = parseInt(e.clientX - offsetX);   canMouseY = parseInt(e.clientY - offsetY);   // if the drag flag is set, clear the canvas and draw the image   if (isDragging) {     logo_context.clearRect(0, 0, canvasWidth, canvasHeight);     logo_context.drawImage(logoimage, canMouseX, canMouseY + canvasHeight / 4);   } }
 $("#logo").mousedown(function(e) {   handleMouseDown(e); }); $("#logo").mousemove(function(e) {   handleMouseMove(e); }); $("#logo").mouseup(function(e) {   handleMouseUp(e); }); $("#logo").mouseout(function(e) {   handleMouseOut(e); });  function output() {  bgctx.drawImage(canvas, 0, 0);    document.write("<p>IMG below:</p><img src='" + bg.toDataURL() + "' />"); }

canvas {position: absolute}img {max-width: 100px; max-height: 100px; display: none}

---

Related Topics