javascript - How to set Paper.js Canvas background fill color (No CSS background) - Stack Overflow

admin管理员组

文章数量:1402844

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

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Dec 11, 2015 at 10:53 Akash K.Akash K. 63711 gold badge1515 silver badges2828 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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';

本文标签： javascriptHow to set Paperjs Canvas background fill color (No CSS background)Stack Overflow