Basic Drawing App

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()