Dynamically locate button inside HTML

Question

Inside canvas I draw a line, that line will create dynamically. In the end of line, i want to create an HTML button. But I don't know how to create. Plz, help me.

HTML

<canvas id="c"></canvas> 
<input id="btn" type="button">

Javascript

var line = document.createElement("canvas");
var ctx = line.getContext("2d");
document.getElementById("c").style.height = "300px";
ctx.fillStyle = "red";
ctx.fillRect(10, 1, line.width, line.height);
var ctx = c.getContext("2d");


drawLine(20, 20, 150, 70); 

function drawLine(x1, y1, x2, y2) {
    var dx = x2 - x1,
        dy = y2 - y1,
        len = (Math.sqrt(dx*dx+dy*dy)-1)|0,
        ang = Math.atan2(dy, dx);

    ctx.translate(x1|0, y1|0);
    ctx.rotate(ang);
    ctx.drawImage(line, 0, 0, len, 1);
    ctx.setTransform(1,0,0,1,0,0)
}
ctx.arc(20, 20, 5, 0, 2 * Math.PI);

ctx.fillStyle = 'green';
ctx.fill();
ctx.strokeStyle = 'red'
ctx.stroke();

DEMO

I am working on xamarin mobile app, there is a requirement to create the dynamic path from one location to another location. From xamarin it's not working then i follow this approach xamarin. — ANJYR, Jan 21 '17 at 11:43

score 0 · Answer 1 · edited May 23 '17 at 10:29

You can't put or draw an HTML element in a canvas. You can create the button and then use position: absolute with the same left and top as the end of the line's x and y.

Take a look at this snippet:

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'green';
ctx.strokeStyle = 'red';

drawLine(20, 20, 150, 70);
ctx.arc(20, 20, 5, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();

function drawLine(x1, y1, x2, y2) {
  var button = createButtonOnCanvas(x2, y2);

  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  ctx.closePath();
}

function createButtonOnCanvas(x, y) {
  var btn = document.createElement("button");
  document.body.appendChild(btn);
  btn.style.position = "absolute";
  btn.style.left = x + "px";
  btn.style.top = y + "px";
  btn.innerHTML = "btn";

  return btn;
}

<canvas id="c" width="300" height="100"></canvas>

Since you want to create a button, instead of moving an already existing one, I made a function that creates a completely new button and moves it over a certain (x, y) of the canvas.

You should also use the lineTo() method to draw a line and resize the canvas' width and height attributes. If the width and height attributes are 100 and 100 while the CSS width and height styles are 200px and 200px, those 100x100 pixels will be stretched to fill a 200x200 canvas and everything drawn will get blurry. For more information, take a look at this question.

_What_ isn't working properly? It draws a line on a canvas and puts a ` — dodov, Jan 21 '17 at 12:23
button not coming bottom of line. it comes in center. https://jsfiddle.net/tndmez4a/9/ — ANJYR, Jan 21 '17 at 12:29
As I said in my answer, **don't resize the canvas using CSS**. Remove `width: 80%` from the CSS and it works as expected. Otherwise, the canvas is stretched and the button comes over the "unstretched" coordinate of the line. — dodov, Jan 21 '17 at 12:32

Dynamically locate button inside HTML

1 Answers1