- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
FabricJS β Check if the Cache is Dirty and Renderer is Required for a Polygon?
We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized by any closed shape consisting of a set of connected straight-line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc.
We can check if the cache is dirty and the renderer is required by using the isCacheDirty method. This method checks whether the cache is dirty and thus lets FabricJS know that something in our canvas has changed which requires re-rendering.
Syntax
isCacheDirty( skipCanvas: Boolean )
Parameters
skipCanvas (optional) β This parameter accepts a Boolean value which when set to true, skips canvas checks since the object is painted on the parent canvas.
Example 1: Using the isCacheDirty method
Letβs see a code example to see the logged output when the isCacheDirty method is used. In this case, the original fill colour of our polygon object is blue. However, FabricJS marks objects as dirty and refreshes them at the next render by default. Due to this, the final colour of our object is grey and the logged output is true.
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Using the isCacheDirty method</h2> <p> You can open console from dev tools to see that a true value is returned </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a polygon object var polygon = new fabric.Polygon( [ { x: 250, y: 180 }, { x: 150, y: 180 }, { x: 150, y: 50 }, { x: 200, y: 10 }, ], { fill: "blue", strokeWidth: 3, stroke: "black", } ); // Adding it to the canvas canvas.add(polygon); // Applying a different fill colour polygon.fill = "grey"; // Using isCacheDirty method console.log("Is cache dirty? : ", polygon.isCacheDirty()); </script> </body> </html>
Example 2: Using the isCacheDirty method along with the dirty property
Letβs see a code example to see the logged output when the isCacheDirty method is used in conjunction with the dirty property. The dirty property rerenders the object's cache in the next render call when set to βtrueβ. Since we have assigned dirty a βfalseβ value, the object's cache will not be rerendered and therefore the isCacheDirty method returns a false value in the console.
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Using the isCacheDirty method along with the dirty property</h2> <p>You can open console from dev tools to see that a false value is returned </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a polygon object var polygon = new fabric.Polygon( [ { x: 250, y: 180 }, { x: 150, y: 180 }, { x: 150, y: 50 }, { x: 200, y: 10 }, ], { fill: "blue", strokeWidth: 3, stroke: "black", dirty: false, } ); // Adding it to the canvas canvas.add(polygon); // Using isCacheDirty method console.log("Is cache dirty? : ", polygon.isCacheDirty()); </script> </body> </html>
Conclusion
In this tutorial, we used two simple examples to demonstrate how you can check if the cache is dirty and the renderer is required for a Polygon using FabricJS.