Put a table in a canvas in html

Question

I want to put a canvas over table, but it is not working.

Here is the code:

<canvas>
<table id="gameField" class="gameFieldAll">
     <tr>
        <td><input class="Field" type="button" id="00K"onclick="g.pressField(0,0)" ></input> </td>
        <td class="fieldRL"><input class="Field" type="button" id="01K"onclick="g.pressField(0,1)"></input> </td>
        <td><input class="Field" type="button" id="02K"onclick="g.pressField(0,2)"></input> </td>
      </tr>
      <tr>
          <td class="fieldTop"><input class="Field" type="button" id="10K"onclick="g.pressField(1,0)"></input> </td>
          <td class="fieldTop fieldRL"><input class="Field" type="button" id="11K"onclick="g.pressField(1,1)"></input> </td>
          <td class="fieldTop"><input class="Field" type="button" id="12K"onclick="g.pressField(1,2)"></input> </td>
      </tr>
      <tr>
         <td class="fieldTop"><input class="Field" type="button" id="20K"onclick="g.pressField(2,0)"></input> </td>
         <td class="fieldTop fieldRL" ><input class="Field" type="button" id="21K"onclick="g.pressField(2,1)"></input> </td>
         <td class="fieldTop"><input class="Field" type="button" id="22K"onclick="g.pressField(2,2)"></input> </td>
      </tr>

The table disappears on the webpage. Any suggestions? Thanks

I suggest you to take a look to this tutorial to start your amazing yourney in the html5 canvas world https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial — ale, Nov 17 '17 at 06:45
@Kaiido Yes i know what a canvas is. I want to draw a line over the table. — Alex Gruebel, Nov 17 '17 at 06:58
Then you probably understand it cannot have any visible element in it. If I understand what you want, you would place your canvas over the table with CSS, but you need to separate them in the markup. But actually now I see there is no `` end tag at all, and that it may not be an copy-paste omission but actually like this in your code too... ``, so `` — Kaiido, Nov 17 '17 at 07:00
Edited previous comment now I saw you didn't closed your tag. — Kaiido, Nov 17 '17 at 07:02
@Kaiido Sorry i just forget to copy and paste the whole thing. — Alex Gruebel, Nov 17 '17 at 07:03

score 0 · Accepted Answer · answered Nov 24 '17 at 06:12

0

The solutution is to place the canvas above the table and make the css propertys position „absolute“ and the z-index of the canvas higher than the zindex of the table.

answered Nov 24 '17 at 06:12

Alex Gruebel

86
1
9

Put a table in a canvas in html

1 Answers1