How to Draw with Pressure Sensitivity in a Browser

How browser pressure sensitivity works

Modern browsers support the Pointer Events API which exposes stylus pressure (0 to 1), tilt, and azimuth data. Camisual reads this data in real time and maps it to brush size, opacity, or a combination of both, depending on your settings. On a mouse, you can use velocity-based pressure as a substitute.

Compatible devices

Camisual pressure sensitivity works with Apple Pencil on iPad (Safari or Chrome), Wacom and Huion tablets on desktop (using Chrome or Firefox), Microsoft Surface Pen on Surface devices, and Samsung S Pen on Galaxy Tab. A standard mouse or trackpad will not send pressure data but can use velocity-based simulation.

Step-by-step: Set up pressure-sensitive drawing

1. 1

   Switch to Draw mode

   Open your design in Camisual. In the top mode switcher, click "Draw". The left panel shows the Draw section.

2. 2

   Select Expressive mode

   In the Draw section, click the "Expressive" tab. This activates the full P5-powered brush engine with pressure, velocity, and tilt response.

3. 3

   Enable pressure sensitivity

   In the Draw section, expand the "Pressure" subsection. Toggle the "Pressure Sensitivity" option on. You will see options for what pressure controls: size, opacity, or both.

4. 4

   Choose size and opacity response

   For a pencil-like feel, map pressure to both size and opacity. For an inking brush feel, map pressure to size only and keep opacity fixed at 100 percent. Experiment to find what feels natural for your stylus.

5. 5

   Pick a brush type

   Under "Brush Type" in the Draw section, choose Round for standard inking, Pencil for a textured sketch feel, or Calligraphy for brush pens with angled pressure response.

6. 6

   Draw a test stroke

   Make a curved stroke on the canvas pressing lightly at first and harder in the middle. You should see the line taper at the ends and swell in the middle where you applied more pressure. If it does not respond, make sure your browser is set to allow pointer events and that your stylus driver is active.

7. 7

   Adjust the pressure curve if needed

   In the Pressure section, look for a sensitivity slider or curve control. Lower sensitivity means you need to press harder to get a response. Higher sensitivity means even light strokes produce noticeable variation. Adjust until the response feels natural for your stylus.

Velocity-based pressure on mouse

If you are drawing with a mouse, enable "Velocity Pressure" in the Pressure section. This maps drawing speed to line weight so that slow, careful strokes produce thicker lines and fast strokes produce thinner ones. It is a useful substitute that can produce expressive calligraphic strokes on a mouse.