Each section should have different animated shapes

[chiho]

As you might see in the orange section there are animated lines with dots (this.draw = function()), whilst my expected result in the green part should be normal rectangles (this.draw2 = function()) instead of lines with dots. The animation in the green part should have two different opacities, so it seems like there are two different layers of animated background. 

 

To make long story short:

Green part should only call this.draw2 = function(), which are rectangles and besides that there are two different opacities. 

 

How should I fix that.

 

Really important is to not use CSS for this because of performance issues. Only Canvas allows. 

See the Pen ZRZVxK?editors=1010 by chichichi (@chichichi) on CodePen

[PointC]

It looks like this is the 3rd time you've posted a version of this question about your canvas project. In your most recent post (which you've now deleted), Jack gave you this answer:

Quote

We really try to keep these forums focused on GSAP-specific questions. Do you have one of those? We'd be happy to help - we just don't have the resources to offer free general JavaScript/canvas troubleshooting. 

 

We're more than happy to help with GSAP related problems, but these general JS and canvas questions should be posted on a more general forum. Perhaps you could try Stack Overflow.