The digit-classification from ronan-h

digit-classification's People

Contributors

Watchers

digit-classification's Issues

Canvas drawing functions in digit-classifier.html aren't consistent

Drawing works very well on the canvas, but the functions don't make sense. Mainly, fillCircle() has some part in drawing the line (both fillCircle() and connectLine() call ctx.lineTo(...)). Removing ctx.lineTo(...) in either function stops the line being drawn.

Solution would be to remove redundant code, rename the above to something more approriate, and separate out their functionality so it makes more sense.

function onMouseEvent(action, e) {
    // update current mouse position based on event vars
    currX = e.clientX - canvas.getBoundingClientRect().left;
    currY = e.clientY - canvas.getBoundingClientRect().top;

    switch (action) {
        case "mousedown":
            // start drawing
            drawing = true;
            ctx.moveTo(currX, currY);
            fillCircle();
            break;
        case "mouseup":
            drawing = false;
            fillCircle();
            // automatically classify canvas on mouse up
            classify();
            break;
        case "mousemove":
            if (drawing) {
                // draw a line from where the mouse was to where it is now
                connectLine();
            }
            break;
        case "mouseout":
            if (drawing) {
                // automatically classify canvas on mouse out
                classify();
            }
            drawing = false;
            break;
    }
}

function connectLine() {
    // connect a line between where the mouse was and where the mouse currently is
    ctx.lineTo(currX, currY);
    ctx.stroke();
    fillCircle();
}

function fillCircle() {
    // fill a circle at the location of the mouse
    ctx.beginPath();
    ctx.arc(currX, currY, lineWidth / 2, 0, 2 * Math.PI);
    ctx.fill();
    ctx.closePath()
    ctx.beginPath();
    ctx.lineTo(currX, currY);
}

Recommend Projects