In case someone else comes looking for sample code, I figured it out as follows.

My case: I had an svg with two layers drawn by plotly. I was only getting the first layer like the OP. Plotly drew into an element with id="chart". A new canvas already created with id="layer0".

Eventually I needed to send back to PHP as a dataURL so:

  var nodes = document.getElementById("chart").querySelectorAll('svg');
  for (var i = 0; i < nodes.length; i++) {
    result = new XMLSerializer().serializeToString(nodes[i]);
    eval('layer'+[i]+'chart').src = 'data:image/svg+xml;base64,' + btoa(result);

  elem0 = document.getElementById("layer0");
  ctx0 = elem0.getContext("2d");

  layer0chart.onload = function() {
    canvasdata = elem0.toDataURL();


I appreciate the help from @BioDeveloper and @RobertLongson. The key for me ultimately was to also make sure the toDataURL was being called as an image was being loaded. Cheers.

Related Query