Agfdhyk

I'm trying to write JavaScript code to draw curves on a canvas. With some help I was able to get the code to draw curves (see Event handlers not responding) but I've been having problems with my attempts to generate disjoint curves.

My first attempt was to use multi-indexed arrays, with each subarray containing the points that make up each individual curve. Because I couldn't figure out what was going wrong, I switched to simply resetting the array.

In the code below, deleting

// Reset xin and yin since I was having a bear of a time trying to use multi-indexed arrays

xin = ;

yin = ;

in the function mouseupfx allows my to draw as I should be able to. Why does that piece of code cause it to malfunction?

<script src="https://d3js.org/d3.v5.min.js"></script>

<script>



    document.body.style.backgroundColor = "black";



    canvw = 500;

    canvh = 500;

    border = 6;



    clickDown = 0;

    pointIndex = 0;

    xin = ;

    yin = ;



    canvas = d3.select("body")

                    .append("svg")      //Add an SVG to the body

                    .attr("width",canvw+2*border)

                    .attr("height",canvh+2*border)



    canvbg = canvas.append("rect")

                    .attr("x",border)

                    .attr("y",border)

                    .attr("width",canvw)

                    .attr("height",canvh)

                    .attr("fill","white")

                    .attr("stroke","rgb(200,200,200)")

                    .attr("stroke-width",5)



    mydiv = d3.select("body")

                    .append("div")

                    .attr("id","outputdiv")

                    .style("color","orange")    //This is actually how I change the text color



    canvas.on("mousedown", mousedownfx);



    canvas.on("mouseup", mouseupfx);



    canvas.on("mousemove",mousemovefx);



    canvas.on("mouseout",mouseoutfx);



    function mousedownfx() {

        clickDown = 1;

        /* Add an element ot xin and yin so I don't have to check every time the mouse moves

        whether or not there's a previous entry in xin and yin so I can draw a line from it */

        xin.push(d3.mouse(this)[0]);

        yin.push(d3.mouse(this)[1]);

    }



    function mouseupfx() {

        clickDown = 0;

        // Reset xin and yin since I was having a bear of a time trying to use multi-indexed arrays

        xin = ;

        yin = ;

    }



    function mouseoutfx() {

        clickDown = 0;

    }



    function mousemovefx() {

        if (clickDown == 1) {

            // Add new point to curve data

            pointIndex = pointIndex + 1;

            xin.push(d3.mouse(this)[0]);

            yin.push(d3.mouse(this)[1]);

            // Draw new line segment

            canvas.append("line")

                .attr("x1",xin[pointIndex-1])

                .attr("x2",xin[pointIndex])

                .attr("y1",yin[pointIndex-1])

                .attr("y2",yin[pointIndex])

                .style("stroke","black")

                .style("stroke-width",3);

        }

    }



</script>