WebGL I haven't quite got the hang of yet, but I just discovered `PointerEvent.pressure` and got terribly distracted playing with it with my phone :) thanks!
<!doctype html>
<style>html, body { width: 100%; height: 100%; margin: 0 }</style>
<canvas style="touch-action: none" id=c></canvas>
<div id=z style="position: fixed; left: 0; top: 0"></div>
<script>
c.width = window.innerWidth;
c.height = window.innerHeight;
var x = -1, y;
var ctx = c.getContext('2d');
c.onpointermove = ev => {
//var p = Math.pow(ev.pressure, 3) * 20; // both bad;
var p = 0.5/(-Math.log10(ev.pressure)); // try one
z.innerText = ev.pressure + '\n' + p;
if (x != -1) {
ctx.lineWidth = p;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(ev.x, ev.y);
ctx.stroke();
}
x = ev.x;
y = ev.y;
}
c.onpointerup = () => x = -1;
</script>
The two one-liners above to convert pressure to lineWidth are the result of playing around with no idea what I'm doing for a few minutes. They... work, in the sense that I can tolerate them for about 30 seconds :) but I keep playing with them because they don't "click". I wouldn't mind suggestions for how to actually do this (my google-fu isn't finding anything, likely because I don't know what to look for). I had a poke around Krita, but only found C++ abstractions.
I also stumbled on http://willowsystems.github.io/jSignature/#/about/linesmooth..., which is an awesome looking bit of open source code. It implements both realtime curve extrapolation and pressure approximation for devices/environments that don't report that.
