Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Return Value
Returns a Boolean value indicating whether the object's cache is dirty and needs re-rendering.
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>
Is cache dirty? : true
Example 2: Using the isCacheDirty method 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 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>
Is cache dirty? : false
How Cache Dirtiness Works
When you modify properties of a FabricJS object (like fill color, position, size), the object's internal cache becomes "dirty" and needs to be regenerated. The isCacheDirty method helps determine when re-rendering is necessary, optimizing performance by avoiding unnecessary redraws.
Key Points
- Objects become dirty automatically when properties change
- Setting
dirty: falseprevents automatic cache invalidation - Use
isCacheDirty()to check rendering requirements - The
skipCanvasparameter optimizes performance for nested objects
Conclusion
The isCacheDirty method is essential for optimizing FabricJS performance by checking when polygon objects need re-rendering. Use it with the dirty property to control cache invalidation behavior.
450 Views
