I have finally finished coding and testing the Monty Hall problem. It quite a while to squash the bugs. One bug in particular was a box being drawn on the canvas. I checked the code over and over and it looked like it should not be happening. It turns out that there are at least two ways of drawing a rectangle in HTML5 canvas. If you search the first one that pops up (google or duckduckgo) uses the .rect() method. The google search points to W3Schools and the duckduckgo points to HTML Canvas Tutorials. They use a .beginPath() and then end with the .stroke() method. It does result in drawing a rectangle. The problem is that it keeps drawing the rectangle. So if later you do a moveto() and then .lineto() to draw a line the rectangle comes with it. Now on both searches the second result points to information about the .strokeRect() method. In my code since I am creating animations I am controlling the persistence of the graphics so I don’t need canvas to manage that for me. It took me quite a while to figure out that the beginPath() option was causing me this problem. I have a function that calls drawbutton(). I call this multiple times at different locations. The weird part was that only the first call was being retained, the other ones did not. I looked at the code not seeing the problem. Had all the rectangles been retained I would have something to go on. When you have a draw loop running rather quickly it makes it difficult to step through the debugger. Once I realized it had to be that code I looked for a way to clear the path/stroke but could not find any options. It was then that I found the .strokeRect() method which does not need the .beginPath() and then I could finally get to coding the tracking of the results. So here is a finished screenshot of the game.
You can see that it keeps track of the wins by switching or staying. In this instance I had chosen to switch from 2 to 3.