You can detect and use pen input events on websites, including pressure sensitivity, tilt and other variables. Try it here

I have yet to find a good, free tool that lets me draw with the pencil on linux. All those I can find have some problem that completely kills the experience, such as lines being drawn if I accidentally touch the screen (I like to draw with my hand resting on the surface) or them not taking into account the pencil pressure (e.g. gimp).

I realized that web browsers detect the pen pressure well enough, so I wrote a minimal script for this.

The code: https://github.com/autotel/pencil-input-playground

The branches are important

• Basic: contains the minimum functionality
• Complex: implements more functions. It can be used multi-player. It's a branch for experimentation, so things might act weird sometimes.

This is the most main code for this:

function down_handler(event) {
    event.preventDefault();
    if (event.pointerType === "touch") {
        view.dragStart(event.x, event.y);
    } else {
        scribe.start(event.x, event.y, event.pressure);
        page.startTrace();
    }
}


el.onpointerdown = down_handler;

as you can see, we utilize the pointerdown handler, which is the same method for handling mouse down events. Since I want to also be able to draw with the mouse if necessary, I simply pass the pressure to my handler. This pressure value, conveniently is set to 0.5 if it was generated by a mouse drag.

The browser also detects many other factors such as tilt, twist, et cetera. My pen does not support these, so I was not able to try them out. But you can try them right away by calling this statement on your web console:

document.onpointermove = ({
    type, pressure, twist, tiltX, tiltY, pointerId, tangentialPressure, which
}) => console.log({
    type, pressure, twist, tiltX, tiltY, pointerId, tangentialPressure, which
})