HTML Canvas erases rectangle right after drawing

0
votes

Upon pressing a button a rectangle should be drawn on the second layer of my canvases and it should stay there. The drawing works, the staying does not. The rectangle appears for an instant, but immediately disappears again, and I cannot figure out why. Rectangles that I draw upon mouse actions with event listeners stay... 

<html>
<body>


<h2>Raumaufteilung a: </h2>

<form action="" id="inputTactics"> 
<table border="1">
<tr><td><button id="Butt0" onclick="draw2()">Alle</button></td>
    <td  width="600" height="400"  valign="top"> 
        <div id="TacticsPic">  
          <canvas id="ground" width="525" height="340"
                style="border:2px solid #ffffff; background-color: #23D419; position: absolute; z-index: 0">
          </canvas>
          <canvas id="c2" width="525" height="340"
                style="position: absolute; z-index: 1">
          </canvas>
          <canvas id="c3" width="525" height="340"
                style="position: absolute; z-index: 2">
          </canvas>
            <br>
        </div>
    </td>
    </tr>  
</table>  
</form>   


<script>

    var canvasTac = document.querySelector("#c2");
    var ctxTac = canvasTac.getContext('2d');


function draw2() {
    ctxTac.strokeRect(100,100,250,100);
};

</script>

</body>
</html>
4
javascripthtmlcanvashtml5-canvas

4 Answers

2
votes

It seems the form is submitting, causing the page to reload. Try replacing this line:

<form action="" id="inputTactics">

with this:

<form onsubmit="return false;" id="inputTactics">

Edit: This question seems relevant - Want html form submit to do nothing

1
votes

It's because you've put all of your code in a <form>. Pressing a button in a form submits it and you'll navigate away from your page.

Either remove the <form> (doesn't look like you need it) or you'll need to modify your draw2 function to cancel the submission.

function draw2() {
  ctxTac.strokeRect(100, 100, 250, 100);
  event.preventDefault();
}

Or you can attach the onsubmit handler to the form directly and cancel it there.

<form action="" id="inputTactics" onsubmit="return false;">
1
votes

Your issue is your form tag, it is submitting the form if you click the button.

var canvasTac = document.querySelector("#c2");
var ctxTac = canvasTac.getContext('2d');


function draw2() {
  ctxTac.strokeRect(100, 100, 250, 100);
};

document.getElementById("Butt0").addEventListener("click", draw2);
<h2>Raumaufteilung a: </h2>

<table border="1">
  <tr>
    <td>
      <button id="Butt0">Alle</button>
    </td>
    <td width="600" height="400" valign="top">
      <div id="TacticsPic">
        <canvas id="ground" width="525" height="340" style="border:2px solid #ffffff; background-color: #23D419; position: absolute; z-index: 0">
        </canvas>
        <canvas id="c2" width="525" height="340" style="position: absolute; z-index: 1">
        </canvas>
        <canvas id="c3" width="525" height="340" style="position: absolute; z-index: 2">
        </canvas>
        <br>
      </div>
    </td>
  </tr>
</table>
0
votes

I think it's because you have a form tag which is triggering a submit.

Take away the form tag and it will work.