Dynamic Stroke Width Using Pen Pressure

[lojithv]

One of the key features often sought after in drawing applications is the ability to vary stroke width based on pen pressure, particularly useful for digital artists and designers using stylus input devices.

At present, I think Konva.js lacks native support for dynamic stroke width adjustment based on pen pressure, which limits its usability in applications where this functionality is desired. This discussion aims to propose the implementation of dynamic stroke width using pen pressure support within the Konva.js library.

Objective:

The primary goal of this proposal is to enhance Konva.js by introducing a feature that allows developers to create drawing applications capable of dynamically adjusting stroke width based on pen pressure. This feature would significantly improve the user experience for digital artists and designers using Konva.js in their projects.

Implementation Approach:
The implementation of dynamic stroke width using pen pressure in Konva.js can be achieved through the following steps:

Input Device Detection:
Implement a mechanism to detect the input device type, particularly focusing on stylus or pen input devices that support pressure sensitivity.

Pressure Sensitivity Mapping:
Map the pressure sensitivity data provided by the input device to stroke width values. This mapping should be configurable to allow developers to fine-tune the relationship between pressure and stroke width according to their application requirements.

Real-time Updates:
Ensure that stroke width updates occur in real-time as the user applies varying levels of pressure while drawing. This will provide a responsive and natural drawing experience.

Compatibility and Fallbacks:
Address compatibility issues and provide fallback mechanisms for devices that do not support pressure sensitivity, ensuring graceful degradation of functionality.

Hope this feature will be valuable for all of you. Thanks :)

[lavrton]

I don't have plans to add this directly into Konva.js library.

Instead, I recommend to use https://github.com/steveruizok/perfect-freehand library to generate svg path, then render it using Konva.Path shape.