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 to float

    to bottom of a

    when you can't use position:relative and position:absolute

    How to convert bullet points into horizontal list?

    How to override Zurb Foundation css properties using rails 3.1?

    How do I make my django app load content as I scroll?

    How to make this CSS layout

    How to split a div into multiple rows and columns in css?

    how to get a div to randomly move around a page (using jQuery or CSS)

    How to set a width of the background (HTML and CSS)

    How to assign css for prettify(syntax highlighter)

    How do I span columns with a div based table?

    How to center text in the middle of the responsive circle, (text is responsive too)?[css/html only]

    How can I fix this CSS positioning for the transition to work? (CSS3 with Bootstrap)

    How to fill the width under an image with a caption without defining the width of the caption?

    How to prevent css auto hyphenation for email addresses

    how to make background-image included via a “class” responsive

    How to capitalize first letter with JSTL/CSS?

    How to deselect with CSS?

    How to use Jekyll baseurl in css files

    How to call a jquery funcion with a css button?

    How do I make this type of layout with CSS? [closed]

    How to design HTML header

    How to create inheritance with LESS?

    Creating transparent text to show gradient color of underlying div

    how to make Sections in one line?

    How to change the border of an element when selected?

    How to create change image option on mousehover like in gmail account?

    How do I make this lightbox I am creating only open on the div I am clicking?

    How to style 3 unorderd lists horizontally in 1 div

    How to center a text which is placed on an image

    How to include 3 background images in a single css?