How to push image (behind canvas) to front in order for its onclick function to work

I have image of a pawn on a board. The image has onclick function that when you press on it you should recive an alert. The problem is that above the image there is canvas that hides the functionality of the onclick.

When I put the mouse mouse cursor (using Chrome's magnifying galss) you can see that the canvas is on top of the pawn's images:

With canvas: JSFIDDLE: when click pawn nothing happens

Without canvas: JSFIDDLE: when click pawn receive alert

How can I keep the canvas and push the pawn image to front in order for the onclick function to work?

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>
     <td class="" cellnumber="16" row="3" col="0"><span>16</span></td>
     <td class="" cellnumber="17" row="3" col="1"><span>17</span></td>
     <td class="" cellnumber="18" row="3" col="2"><span>18</span></td>
      <td class="" cellnumber="19" row="3" col="3"><span>19</span></td>
     <td class="" cellnumber="20" row="3" col="4"><span>20</span></td></tr>
     <tr>
     <td class="" cellnumber="11" row="2" col="0"><span>11</span></td>
     <td class="" cellnumber="12" row="2" col="1"><span>12</span></td>
     <td class="" cellnumber="13" row="2" col="2"><span>13</span></td>
     <td class="" cellnumber="14" row="2" col="3"><span>14</span></td>
     <td class="" cellnumber="15" row="2" col="4"><span>15</span>
     <br><br><p class="SnakesAndLadders" from="15" to="24">Ladder to 24 </p>
     </td>
     </tr>
     <tr>
    <td class="" cellnumber="6" row="1" col="0"><span>6</span></td>
    <td class="" cellnumber="7" row="1" col="1"><span>7</span></td>
    <td class="" cellnumber="8" row="1" col="2"><span>8</span></td>
    <td class="" cellnumber="9" row="1" col="3"><span>9</span></td>
    <td class="" cellnumber="10" row="1" col="4"><span>10</span></td>
               </tr>
                    <tr>
                        <td class="" cellnumber="1" row="0" col="0"><span>1</span>
                         <img src = "http://s23.postimg.org/ynlvim1x3/image.png" onclick="doSomething()">
                 </td>
    <td class="" cellnumber="2" row="0" col="1"><span>2</span></td>
    <td class="" cellnumber="3" row="0" col="2"><span>3</span></td>
    <td class="" cellnumber="4" row="0" col="3"><span>4</span></td>
    <td class="" cellnumber="5" row="0" col="4"><span>5</span></td>
                 </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>   

Answers


If the canvas is doing nothing other than drawing lines, then just tell the browser not to listen for events on the canvas:

#myCanvas{
  pointer-events: none;
}

Demo: http://jsfiddle.net/m1erickson/La292q67/5/


Need Your Help

ASP Best Practices Overhead

asp-classic

Assume a typical, database and session driven ASP application developed using best practices just before the first release of .NET. Assign the amount of effort required for seasoned professionals to

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.