title: How to combine two or more canvas element in a page into one canvas element where width of new canvas element is summation of all?
body: <p>i have two separate canvas elements. one having text "WELCOME" second having text "YOU".
  now i want to combine those two canvas element in new canvas element and it should seems like "WELCOMEYOU"</p>
  
  <p>And my snippet is</p>
  
  <pre><code>function buttonclickevent() {
      //To get all the canvas elements
      var canvas1 = $('canvas');
      var b_canvas = new Array();
      for (var l = 0; canvas1[l] != null; l++) {
          b_canvas[l] = canvas1[l];
      }
      //To get only selected canvas elements instead of all canvas element.
      //b_canvas[0] = canvas1[0];
      //b_canvas[1] = canvas1[1];
  
      //create a temporary canvas to store the combined canvas element.
      var buffer = document.createElement("canvas");
      buffer.width = 0;
      buffer.height = 0;
      for (var i = 0; i &lt; b_canvas.length; i++) {
          buffer.width += b_canvas[i].width;
          buffer.height += b_canvas[i].height;
      }
      var yPosition = 0;
      var buffer_context = buffer.getContext("2d");
      for (var j = 0; j &lt; b_canvas.length; j++) {
          buffer_context.drawImage(b_canvas[j], 0, yPosition, b_canvas[j].width, b_canvas[j].height);
          yPosition += b_canvas[j].height;
      }
      exportImage(buffer, "myImage", "png");
  }
  
  function exportImage(buffer, fileName, fileType) {
      var lnk = document.createElement('a'),
          e;
      lnk.download = fileName;
      lnk.href = buffer.toDataURL("image/" + fileType).replace("image/" + fileType, "image/octet-stream");
      if (document.createEvent) {
          e = document.createEvent("MouseEvents");
          e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
          lnk.dispatchEvent(e);
      } else if (lnk.fireEvent) {
          lnk.fireEvent("onclick");
      }
  }
  </code></pre>