Here is a basic drawing app using streamsflyd.
I have choosen Flyd, but you can use whatever library you like.
You can play with it here : DrawApp
let DrawApp = (function (doc) {
let canvas;
// context 2d
let ctx;
// rectangle wrapping canvas
let rect = {};
// streams
let mouseMove$ = flyd.stream();
let mouseCoords$ = mouseMove$
.map(m => ({x : m.x - rect.x, y : m.y - rect.y}));
//helpers
let addEvent = (evt, cb) => canvas.addEventListener(evt, cb);
let eltById = (id) => document.getElementById(id);
let log = (msg) => console.log(msg);
// application state
let state = {
strokeColor : "black",
drawing : false
};
function startDraw() {
let {x, y} = mouseCoords$();
ctx.beginPath();
ctx.moveTo(x, y);
state.drawing = true;
}
function draw() {
if (state.drawing) {
let {x, y} = mouseCoords$();
ctx.lineTo(x, y);
ctx.stroke();
}
}
function stopDraw() {
if (state.drawing) {
state.drawing = false;
}
}
function initEvents () {
addEvent("mousemove", mouseMove$);
addEvent("mousemove", draw);
addEvent("mousedown", startDraw);
addEvent("mouseup", stopDraw);
}
function initApp () {
canvas = eltById("canvas");
ctx = canvas.getContext("2d");
rect = canvas.getBoundingClientRect();
ctx.strokeColor = "black";
initEvents();
}
return {initApp}
} )()
DrawApp.initApp()
Top comments (0)