I'm currently using this Code to draw in a canvas with a pen from a Microsoft Surface (on a surface, of course):
<html>
<head>
<style>
/* Disable intrinsic user agent touch behaviors (such as panning or zooming) */
canvas {
touch-action: none;
}
</style>
<script type='text/javascript'>
var lastPt = null;
var canvas;
var ctx;
function init() {
canvas = document.getElementById("mycanvas");
ctx = canvas.getContext("2d");
var offset = getOffset(canvas);
if(window.PointerEvent) {
canvas.addEventListener("pointerdown", function() {
canvas.addEventListener("pointermove", draw, false);
}
, false);
canvas.addEventListener("pointerup", endPointer, false);
}
else {
//Provide fallback for user agents that do not support Pointer Events
canvas.addEventListener("mousedown", function() {
canvas.addEventListener("mousemove", draw, false);
}
, false);
canvas.addEventListener("mouseup", endPointer, false);
}
}
// Event handler called for each pointerdown event:
function draw(e) {
if(lastPt!=null) {
ctx.beginPath();
// Start at previous point
ctx.moveTo(lastPt.x, lastPt.y);
// Line to latest point
ctx.lineTo(e.pageX, e.pageY);
// Draw it!
ctx.stroke();
}
//Store latest pointer
lastPt = {x:e.pageX, y:e.pageY};
}
function getOffset(obj) {
//...
}
function endPointer(e) {
//Stop tracking the pointermove (and mousemove) events
canvas.removeEventListener("pointermove", draw, false);
canvas.removeEventListener("mousemove", draw, false);
//Set last point to null to end our pointer path
lastPt = null;
}
</script>
</head>
<body onload="init()">
<canvas id="mycanvas" width="500" height="500" style="border:1px solid black;"></canvas>
</body>
</html>
So far so good, its working fine.
What I'm planning to do now, is that the canvas reacts to the pressure on my surface pen.
I know that PointerEvent has a property pressure and I know that for canvas, there is lineWidth. But how can I combine those? So when I only put a little bit of pressure I get a thin line and the more pressure the thicker the line gets?
Thanks
Edit: just realized, that there seems to be a problem in the code, even when drawing with the pen, it seems to jump to the else case (so the fallback for using the mouse), tried to add a console.log into the if part, and its not printed... Why is this?
