Fabric.js: When clipped canvas exported as JPG gives black background

[monis01]

Hi
I am facing an issue with the clipped region that is giving black background when is exported as jpg image. I have a canvas onto which I add shapes like(circle,square,rectangle,octagon etc.) and clipped the canvas according to the base shapes. Now when I try preview the drawn image by doing :

imagBased64 = canvas.toDataURL({multiplier:1});                    
$('#preview_img').attr('href', imagBased64);

and same thing happens when I send data to backend and then fetch then generated image. This what my canvas is like

and this what I get on preview (and getting image back from the server)

I have tried :

var shape = canvas.item(0);
canvas.clipTo = function(ctx){
            shape.set({
                       fill:' '
            })
           shape.render(ctx);
}

and also #2443 by making changes as directed here, but no luck.
Have I missed something or I am not aware of.
Thanks for time and help.

PS: I am using fabric "1.6.2" .

[asturur]

Canvas pixels are transparent black, all zeroes.
IF you do not color them with white, in jpeg you get non transparent black, black black.

Seta background color to white for your canvas, what you see on your canvas in the browsers is a transparent canvas trough which the white webpage is visible.

[monis01]

Yes I did that

canvasCopy.setBackgroundColor('#FFFFFF')
canvasCopy.renderAll();

but when checked inside

canvasCopy.renderAll();

canvasToDrawOn variable

is this fillStyle dominating ?

Thanks

[asturur]

no i think your clipTo is clipping the background color too.

try to use the before:render event and do

this.contextContainer.fillStyle = 'white'
this.contextContainer.fillRect(0, 0, canvas.width, canvas.height)

[monis01]

Thanks I believe that is what happening, fixed now. :+1:
So by clipping the region on canvas it changes that area to transparent ?
when I have exported it to 'png' format I was able to get white background.
Is there anything I can read more deep on such issue.
Thanks

[asturur]

So the canvas IS transparent and the clipping region prevent it to be painted white with background white.

You should give a check to fabricJS code there is no much documentation on how the render loop works.

[monis01]

Appreciated :+1:
Thanks