Slide 22
Slide 22 text
Bresenham Line Algorithm
let previousPoint = null;
canvas.addEventListener('pointerdown', event => previousPoint = {x: event.offsetX, y:
event.offsetY});
canvas.addEventListener('pointermove', event => {
if (previousPoint) {
const currentPoint = {x: event.offsetX, y: event.offsetY};
for(let {x, y} of bresenhamLine(previousPoint.x, previousPoint.y,
currentPoint.x, currentPoint.y)) {
ctx.fillRect(x, y, 2, 2);
}
previousPoint = currentPoint;
}
});
canvas.addEventListener('pointerup', () => previousPoint = null);
PWA Workshop
From 0 to MS Paint with Project Fugu (Hands-on)
Paint