I am debugging a game. The problem is complex, and to make it more visual,
I am drawing a line to show the surrounding area of the avatar.
I copied some code from the place that draws the board, pasted it, and
edited it. It looks like this, and I'll refer to it as code sample 1.

          ctx.strokeStyle = "#FFFF00";   // color
          ctx.lineWidth = 4;
          ctx.beginPath();
          ctx.moveTo(temp_c*COL_MULT, temp_r*ROW_MULT);
          ctx.lineTo((temp_c+1)*COL_MULT, (temp_r+1)*ROW_MULT);
          ctx.closePath();    

The line did not show up. So now I'm debugging the thing that is supposed
to help me debug the program. After double-checking several things
(is it being drawn then something else drawn over it, is it somehow not
getting to the above code, is it being erased) nothing seemed to work.
This points to the above code having a problem, though it looks identical
to other code to draw a line.

I have a demo program that draws a red line from 100,100 to 200,200. 
That's all that it does. Having simple examples like that are very useful.
I copied the code into the game, pasting it after the code above.

    ctx.beginPath();
    ctx.lineWidth = 4;
    ctx.strokeStyle = "#F40000"; // "red";
    ctx.moveTo(100, 100);
    ctx.lineTo(200, 200);
    ctx.stroke();

This works. I even pasted it a second time, with the same "moveTo" and "lineTo"
statements from the code sample 1, and that works. This solves my problem,
in that now I can delete the code sample 1 and leave the working code in
its place. This is a practical but unsatisfying fix, since there is no
explanation as to why. And when that happens, how do I know that it 
will not happen again? 

Looking closer at the code, I finally spotted the difference. The code
sample 1 ends with a "closePath" statement, while the simple line drawing
code ends with a "stroke" statement. Then I recalled that the code sample 1
came from a function that drew not only a line, but filled it in to make
a shape, thus it was not really drawing a line.