canvas.toDataURL() resulting in an empty transparent image

I am using blend4web to create a 3D product configurator with a varied set of options that would be live rendered. Blend4web renders this on a canvas. I have built the db in such a way that the product is only created as and when the user creates it putting all the building blocks together on the canvas and paints them with different materials. Once the user configures the product, I want to be capture the rendered product on the canvas as a png and display it in the cart page.

When I right click on the loaded 3D file on canvas and choose "Save Image as..", I get the actual canvas content as a png image. However, when I do the same thing with js in the file or even in console, an empty transparent image is being generated. This issue has been giving me bad headaches for the last couple of days and I haven't found any reason or solution.

I have referred this and edited b4w.min.js so that any getContext("2d") is modified to getContext("2d",{preserveDrawingBuffer: true}). However, the result is still the same.

Console output below. b is an empty image-

    > var a = document.getElementsByTagName("canvas")[0];
        a
        <canvas width=​"575" height=​"613" style=​"position:​ absolute;​ left:​ 0px;​ top:​ 0px;​ width:​ 575px;​ height:​ 613px;​">​
    > b = a.toDataURL();
   "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAj8AAAJlCAYAAAA1uZOmAAAcrUlEQ…GjAwQIECBAgEBKwPhJvVtYAgQIECBAwPjRAQIECBAgQCAl8IPuAmYVHTVbAAAAAElFTkSuQmCC"

Answered here.