One of the challenges I'm facing involves an image of a pawn on a board. The image is set up with an onclick function that should trigger an alert when clicked. However, there is a canvas positioned above the image, which is interfering with the functionality of the onclick.
Upon closer inspection using Chrome's magnifying glass, it becomes apparent that the canvas is positioned above the pawn image:
See the issue with canvas:
JSFIDDLE: Clicking on the pawn does not trigger any action
Compare without canvas:
JSFIDDLE: Clicking on the pawn triggers an alert
I'm looking for a solution to maintain the canvas while ensuring the pawn image is brought to the front, allowing the onclick function to work as intended.
CSS:
td {
width: 100px;
height: 90px;
text-align: left;
vertical-align: top;
border: 1px solid black;
position: relative;
}
table
{
position: fixed;
left:9px;
top:8px;
}
tr:nth-child(even) td:nth-child(odd), tr:nth-child(odd) td:nth-child(even)
{
background:#00A2E8;
}
td span {
position: absolute;
bottom: 0;
}
#myCanvas {
z-index: 10;
position:absolute;
font:bold;
color:red;
}
HTML:
<body>
<div id="board" value="5">
<table oncontextmenu="return false">
<tbody>
<tr>
<td class="" cellnumber="21" row="4" col="0"><span>21</span></td>
<td class="" cellnumber="22" row="4" col="1"><span>22</span>
<br><br><p class="SnakesAndLadders" from="22" to="6">Snake to 6 </p></td>
<td class="" cellnumber="23" row="4" col="2"><span>23</span></td>
<td class="" cellnumber="24" row="4" col="3"><span>24</span></td>
<td class="" cellnumber="25" row="4" col="4"><span>25</span></td>
</tr>
<tr>
[Table content continues...]
</tr>
</table>
<canvas id="myCanvas" width="600" height="500"></canvas>
<canvas id="myCanvas2" width="600" height="500"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(50, 45);
context.lineTo(500, 450);
context.stroke();
context.stroke();
function doSomething()
{
alert("Ping");
}
</script>