HTML5 canvas image tooltip

Question

So, I've been trying to Plot images(marks) on this yellow circle. I try to show random points/marks on image inside canvas circle. I want to show tooltip like this:

This is my code:

 function randomIntFromInterval(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //create circle ctx.beginPath(); ctx.arc(190, 190, 190, 0, 2 * Math.PI); //circle background color ctx.fillStyle = 'rgba(255, 238, 48, 0.11)'; ctx.fill(); //circle border ctx.lineWidth = 1; ctx.strokeStyle = '#FFC500'; ctx.stroke(); ctx.closePath(); var xCor, yCor, p1, p2, pcolor, posY = 100, txtwidth, txtLoc = "hello world"; function getXY() { //get x/y random coordinate xCor = randomIntFromInterval(50, 300); yCor = randomIntFromInterval(50, 300); } function drawTextBG(ctx, txtLoc, font, x, y) { ctx.save(); ctx.font = font; ctx.textBaseline = 'top'; ctx.fillStyle = '#fff'; var width = ctx.measureText(txtLoc).width; ctx.fillRect(x, y, width, parseInt(font, 10)); ctx.fillStyle = '#000'; ctx.fillText(txtLoc, x, y); ctx.restore(); } function drwLine(p1, p2, pcolor) { ctx.beginPath(); ctx.moveTo(p1 + 10, p2); ctx.lineTo(100, 100); ctx.strokeStyle = pcolor; ctx.lineWidth = 2; ctx.stroke(); ctx.closePath(); console.log(p1 + ' ' + p2); } //insert image map marker var t, mark = new Image(); mark.src = "http://icons.iconarchive.com/icons/e-young/gur-project/32/map-pointer-icon.png"; mark.onload = function () { getXY(); ctx.drawImage(mark, xCor, yCor); drwLine(xCor, yCor, '#d93030'); //drawTextBG(ctx, txtLoc, '14px arial', 30, 30); //console.log(xCor+' '+yCor); getXY(); ctx.drawImage(mark, xCor, yCor); drwLine(xCor, yCor, 'd93030'); //console.log(xCor+' '+yCor); getXY(); ctx.drawImage(mark, xCor, yCor); drwLine(xCor, yCor, 'd93030'); //console.log(xCor+' '+yCor); getXY(); ctx.drawImage(mark, xCor, yCor); drwLine(xCor, yCor, 'd93030'); //console.log(xCor+' '+yCor); getXY(); ctx.drawImage(mark, xCor, yCor); drwLine(xCor, yCor, 'd93030'); //console.log(xCor+' '+yCor); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <canvas id="myCanvas" class="mycanv" height="390" width="390"> Your browser does not support the HTML5 canvas tag.</canvas> 

All using canvas.

Answer 1

You can use vector math to find the offset of the tooltips. You can execute the example below.

 // Functions function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } function point(x, y) { return { "x" : x, "y" : y }; } function vector(p1, p2) { return point(p2.x - p1.x, p2.y - p1.y); } function normalize(v) { var mag = Math.abs(Math.sqrt((vx * vx) + (vy * vy))); return point(vx / mag, vy / mag); } function normalize2(p1, p2) { return normalize(vector(p1, p2)); } function add(p1, p2) { return point(p1.x + p2.x, p1.y + p2.y); } function mult(p, x) { return point(px * x, py * x); } function offsetPoint(p1, p2, offset) { return add(p2, mult(normalize2(p1, p2), offset)); } function randPoint() { return point(randInt(50, 300), randInt(50, 300)); } // Methods function drawToolTip(ctx, origin, p, text, font, padding) { ctx.save(); ctx.font = font; ctx.textBaseline = 'top'; ctx.fillStyle = '#FF0'; var v = offsetPoint(origin, p, 32); var textMetrics = ctx.measureText(text); var textWidth = textMetrics.width; var textHeight = parseInt(font, 10); var x1 = vx - padding, x2 = textWidth + padding*2; var y1 = vy - padding, y2 = textHeight + padding*2; drawLine(ctx, point(p.x+10, py), point(x1, y1)); ctx.fillRect(x1, y1, x2, y2); ctx.rect(x1, y1, x2, y2); ctx.lineWidth = 1; ctx.stroke(); ctx.fillStyle = '#000'; ctx.fillText(text, vx, vy); ctx.restore(); } function drawLine(ctx, p1, p2, pcolor) { ctx.beginPath(); ctx.moveTo(p2.x + 10, p2.y); ctx.lineTo(p1.x, p1.y); ctx.strokeStyle = pcolor; ctx.lineWidth = 2; ctx.stroke(); ctx.closePath(); console.log(p2.x + ' ' + p2.y); } function drawImage(ctx, p, mark) { ctx.drawImage(mark, px - MARKER_WIDTH/4, py - MARKER_HEIGHT/2); } function drawRandMarker(toolTipText) { p = randPoint(); drawLine(ctx, origin, p, '#d93030'); drawImage(ctx, p, mark); drawToolTip(ctx, origin, p, toolTipText, '14px arial', 2); } // Constants var MARKER_SRC = "http://icons.iconarchive.com/icons/e-young/gur-project/32/map-pointer-icon.png"; var MARKER_WIDTH = 32; var MARKER_HEIGHT = 32; var DEFAULT_TEXT = "Hello World"; // Begin main logic var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var origin = point(100, 100); // Create circle ctx.beginPath(); ctx.arc(190, 190, 190, 0, 2 * Math.PI); // Circle background color ctx.fillStyle = 'rgba(255, 238, 48, 0.11)'; ctx.fill(); // Circle border ctx.lineWidth = 1; ctx.strokeStyle = '#FFC500'; ctx.stroke(); ctx.closePath(); // Insert image map marker var t, mark = new Image(); mark.src = MARKER_SRC; mark.onload = function () { drawRandMarker(DEFAULT_TEXT); drawRandMarker(DEFAULT_TEXT); drawRandMarker(DEFAULT_TEXT); drawRandMarker(DEFAULT_TEXT); } 

 <canvas id="myCanvas" class="mycanv" height="390" width="390">Your browser does not support the HTML5 canvas tag.</canvas>