I’ve got this basic drawing app. It’s quite succinct. Still, I wonder if there’s a way to streamline the code further? For instance cutting back on variables? Is it necessary to have a separate variable to detect mousedown? Also, is it possible to use fewer functions?
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 5;
ctx.strokeStyle = "#CC0000";
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
/* Variable that will be used to tell if mouse button is down or not. */
var dragging = false;
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', function mousedown() {
dragging = true;
ctx.beginPath();
ctx.moveTo(x, y);
canvas.addEventListener('mousemove', draw, false);
});
function draw(e) {
x = e.clientX - canvas.offsetLeft;
y = e.clientY - canvas.offsetTop;
if(dragging == true) {
ctx.lineTo(x, y);
ctx.stroke();
}
}
canvas.addEventListener('mouseup', function mouseup() {
dragging = false;
});