CODEWITHSUNDEEP
javascriptjqueryhtmlcanvashtml5-canvas
Bharathi
Bharathi

Reputation: 1328

HTML5 canvas clipRect is not working properly

Fiddle Link:http://jsfiddle.net/rorLnaqt/3/

Open the above link. I have draw two spline series within a rectangle and clip rect two spline when it is draw out of the rectangle. If i use clipRect option, spline series is not rendering properly. if i comment it is working fine.

The below fiddle output image is expected result:

fiddle Link:http://jsfiddle.net/rorLnaqt/4/

In that i have removed clipRect option.

Any one please give the idea to solve this problem. clipRect() is must for each series for my scenario. So i can't remove clipRect.

Thanks, Bharathi

Upvotes: 1

Views: 1279

Answers (1)

user1693593
user1693593

Reputation:

Remember to also use beginPath() when defining the clip path, otherwise the old paths will serve as basis for the clip (e.g. the border square for the first clip mask and the spline for the second clip mask):

context.beginPath();
context.rect(47, 20, 833, 351);
context.clip();

Updated fiddle

Upvotes: 5

Related Questions