I'm working on a paper.js animation. The animation contains multiple paths. I'm using ccapture.js to export the animation in a video. What ccapture.js does is capture the drawing on canvas frame by frame and convert it into video.

The problem I'm facing is, in the animation I want the background color of canvas to be white. If I set the background color of canvas using css background-color: white; ccapture will ignore this color and the background color in the captured video will be black as white color is not drawn on canvas and is only background of the element. I've tested this method with no luck.

I've tried adding a white rectangle path in animation but it hides the animation and all I could see is the white rectangle. I found the reference of a function to put the white rectangle at back using sentToBack() from following answer, I'm using it like this:

var rect = new Path.Rectangle({
    point: [0, 0],
    size: [view.size.width / 2, view.size.height / 2],
    strokeColor: 'white',
    fillColor: 'white',
    selected: true
});
rect.sendToBack();

I can't find the reference of this function in paper.js documentation so I'm not sure if I'm using it the right way.

I've also tried creating the rectangle at starting of paperscript as well as ending of paperscript, thought the order of creating paths might solve the issue. But its not helping either.

Is there any other way using which I can set the background fill color of canvas to white. Please ask me for more details. Thanks in advance.

I'm working on a paper.js animation. The animation contains multiple paths. I'm using ccapture.js to export the animation in a video. What ccapture.js does is capture the drawing on canvas frame by frame and convert it into video.

The problem I'm facing is, in the animation I want the background color of canvas to be white. If I set the background color of canvas using css background-color: white; ccapture will ignore this color and the background color in the captured video will be black as white color is not drawn on canvas and is only background of the element. I've tested this method with no luck.

I've tried adding a white rectangle path in animation but it hides the animation and all I could see is the white rectangle. I found the reference of a function to put the white rectangle at back using sentToBack() from following answer, I'm using it like this:

var rect = new Path.Rectangle({
    point: [0, 0],
    size: [view.size.width / 2, view.size.height / 2],
    strokeColor: 'white',
    fillColor: 'white',
    selected: true
});
rect.sendToBack();

I can't find the reference of this function in paper.js documentation so I'm not sure if I'm using it the right way.

I've also tried creating the rectangle at starting of paperscript as well as ending of paperscript, thought the order of creating paths might solve the issue. But its not helping either.

Is there any other way using which I can set the background fill color of canvas to white. Please ask me for more details. Thanks in advance.

• javascript
• html
• canvas
• paperjs

2 Answers 2

After @Kostas answer. I checked again the code of other paths I created. I used blendMode: 'screen' with other paths that I created. That was causing other paths to blend with screen: docs After removing this property it worked as expected.

Related Info: sendToBack() works as I've used in the code.

The paths are stacked in the order they are created in paperscript. First created path will be under all other paths (unless z-index is not changed using sendToBack() or insertBelow() method)

Hope it will help others..

You have to define the color after the rect creation.

Try this:

var rect = new Path.Rectangle({
    point: [0, 0],
    size: [view.size.width / 2, view.size.height / 2],
    strokeColor: 'white',
    selected: true
});
rect.sendToBack();
rect.fillColor = '#ff0000';