How to draw image dynamically on a canvas line between two cells


Tags: javascript,jquery,html,css,canvas

Problem :

I know how to draw line using <canvas> tags.
I want to draw ladder one canvas line I created.
It should be dynamically because the line's angle change everytime so manual solution to copy \ paste picture of a ladder with specific angle won't help me.

This is what I have:
enter image description here

This is what I want:
enter image description here

I tried to use:

      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 120, 50);
      };
      imageObj.src = 'http://s28.postimg.org/7sjqjzpah/ladderpattern.png';

but it print me only one small part of the ladder.
Any idea how can I make every line being created to appear as a ladder?

DEMO (JSFIDDLE): Board with only lines (without ladders)
DEMO (JSFIDDLE): With picture I tried to draw

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">
<canvas id="myCanvas" width="600" height="500"></canvas>
<canvas id="myCanvas2" width="600" height="500"></canvas>
<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></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> </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>      
<script>
var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 120, 50);
      };
      imageObj.src = 'http://s28.postimg.org/7sjqjzpah/ladderpattern.png';

      context.beginPath();
      context.moveTo(120, 45);
      context.lineTo(350, 150);
      context.stroke();
      context.stroke();

function doSomething()
{
    alert("Ping");
}



Solution :

You can use canvas' transformations to draw your angled ladder:

  • save the unrotated context state: context.save();

  • translate to the beginning of your line: context.translate(x,y);.

  • rotate to the same angle as your line: context.rotate(lineAngle);

  • Translate resets the 0,0 origin at the specified x,y. Rotate will rotate the entire canvas by the specified angle with the rotation point at the x,y you specified in Translate. By using translate and rotate, you don't have to recalculate the coordinates of code that draws your ladder for each new line.

  • draw your ladder.

  • restore the context to its unrotated state: context.restore();

enter image description here

Here's example code and a Demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

drawLadder(25,25,150,125);

function drawLadder(x0,y0,x1,y1){
  var dx=x1-x0;
  var dy=y1-y0;
  
  // calc the length of the line
  var length=Math.sqrt(dx*dx+dy*dy);
  
  // calc the angle of the line
  var angle=Math.atan2(dy,dx);

  // draw the ladder
  ctx.save();
  ctx.translate(x0,y0);
  ctx.rotate(angle);
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(length,0);
  ctx.moveTo(0,8);
  ctx.lineTo(length,8);
  for(var i=1;i<(length-2)/4;i++){
    ctx.moveTo(i*4,0);
    ctx.lineTo(i*4,8);
  }
  ctx.stroke();
  ctx.restore();

}
body{ background-color: ivory; }
canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>


    CSS Howto..

    How can I create this shape in CSS? [closed]

    How to preload style image to use it when server is down?

    How can I use jQuery to add a fade in hover effect to my nav items?

    How to apply css just to element that curser is on?

    How to hide a