Applying Visual Overlays to Mask Canvas Content in Fabric.js
When using Fabric.js, the overlayColor property provides a straightforward way to mask everything on a canvas by drawing a layer above all visual content.
Configuring the Overlay Layer
During instantiation, pass overlayColor along with other canvas options:
<canvas id="surface"></canvas>
<script>
const surface = n ...
Posted on Fri, 11 Sep 2026 16:14:13 +0000 by crusty_php
Creating Floating Heart Animations with Canvas and Bezier Curves
Implementing a floating heart animation for a "like" feature requires moving a heart image along a Bezier curve trajectory while gradually fading it out. The core challenge lies in calculating a series of points along the Bezier curve.
Calculating Bezier Curve Points
The mathematical formula for an n-order Bezier curve allows us to co ...
Posted on Sun, 06 Sep 2026 16:55:44 +0000 by AmiraSan
Implementing Advanced Web Animations with CSS3 Transforms and HTML5 Canvas
CSS3 2D Transformations
CSS3 introduced the transform property, enabling developers to manipulate the coordinate space of elements. This allows for effects such as rotation, scaling, skewing, and translation without relying on JavaScript for the visual rendering engine, resulting in smoother performance.
Underlying specific transformation funct ...
Posted on Sat, 29 Aug 2026 16:33:15 +0000 by Hiro
Customizing Fabric.js Selection Controls and Visual States
When working with Fabric.js canvas applications, customizing how selected objects appear is essential for creating polished user experiences. This guide covers the properties and methods available for modifying selection handles, borders, and object states.
Canvas Setup
<canvas id="c" style="border: 1px solid #ccc;">&l ...
Posted on Mon, 24 Aug 2026 16:17:13 +0000 by JessePHP
Creating Transparent Bitmaps in Android
Android applications often require transparent bitmaps for features like custom graphics rendering or adding watermarks. This guide demonstrates how to create a transparent Bitmap in Android with code examples.
Bitmap Fundamentals
In Android development, Bitmap represents an image and is used for loading, displaying, and manipulating pictures. ...
Posted on Mon, 17 Aug 2026 16:10:44 +0000 by renojim
Implementing Text Wrapping in Fabric.js
Fabric.js's default text component does not support automatic text wrapping. To enable this feature, use the Textbox object with the splitByGrapheme property set to true.
Basic Implementation
Initialize a Textbox with a defined width and enable grapheme splitting:
const canvas = new fabric.Canvas('canvasElement');
const textbox = new fabric.Te ...
Posted on Wed, 12 Aug 2026 16:21:40 +0000 by jmandas
Implementing an Eraser Tool with Fabric.js Including Restore Functionality
Setting Up Fabric.js with Eraser Support
The standard Fabric.js package doesn't include eraser functionality out of the box. To use this feature, you'll need either a custom build from the FabricJS builder or the fabric-with-erasing npm package.
Using npm
npm install fabric-with-erasing
This package bundles Fabric.js 5.2 with eraser support in ...
Posted on Wed, 05 Aug 2026 16:57:44 +0000 by not_skeletor
Implementing and Customizing the Circle Brush in Fabric.js
To utilize Fabric.js for free-hand drawing with a unique dotted effect, you must first activate the drawing mode on the canvas. This is achieved by setting the isDrawingMode property to true. The following code initializes the canvas and enables this mode.
const canvas = new fabric.Canvas('myCanvas', {
width: 800,
height: 500,
isDra ...
Posted on Tue, 04 Aug 2026 16:54:35 +0000 by dbrimlow
Practical p5.js Canvas Management: Creation, Parent Binding, Dynamic Resizing, Scrollbar Removal, and Deletion
If a p5.js sketch includes core lifecycle functions like setup() or draw() with out explicit canvas initialization, p5.js automatically appends a 100x100 pixel <canvas> to the <body> element.
function setup() {
background(200);
}
To define custom dimensions, use createCanvas(width, height) and pass numeric values for width and he ...
Posted on Fri, 31 Jul 2026 16:50:42 +0000 by nealios
Detecting Object Overlap in Fabric.js with intersectsWithObject
The intersectsWithObject() method in Fabric.js checks whether one graphical object overlaps with another on the canvas. This functionality supports features like collision prevention and automatic alignmnet in interactive applications.
In a practical example, create a canvas and add multiple shapes—such as rectangles, circles, and triangles. At ...
Posted on Wed, 29 Jul 2026 16:10:41 +0000 by klevis miho