Develop Reference

Trying to create a styled tooltip for an inline SVG

New to Js I am building an interactive pronunciation guide through an inline svg.
You can view it here: https://codepen.io/r-pg/pen/OJgoXWQ
I am currently trying to add basic styled tooltips which will display an associated sentence. I have bound its coordinates relative to the cursor position.
The js I am using for this is here:
function tooldef() {
let t1 = document.querySelector('text[data-tooltip]');
let t2 = document.querySelector('text:nth-of-type(2)');
t1.addEventListener('onmousemove', showToolTip(evt));
t2.addEventListener('onmousemove', showToolTip(evt));
}
function showToolTip(evt) {
let t = evt.currentTarget;
let phrase = t.getAttribute('data-tooltip');
document.getElementById('tooltip').innerHTML = phrase;
tooltip.style.display = "block";
tooltip.style.left = evt.offsetX + 0 + 'px';
tooltip.style.top = evt.offsetY + 0 + 'px';
/* console.log(tooltip);*/
console.log(evt.offsetX);
console.log(evt.offsetY);
}
function hideToolTip(evt) {
tooltip.style.display = "none";
}
This functions perfectly fine when loaded in through codepen or locally however when I apply this to Wordpress it pushes the tooltip far to the right ad I cannot Identify why. Is there an issue with the code or is this an internal problem within WP?

Your code for positioning the tooltip assumes a couple of things:
That your SVG is at 100% scale.
That your SVG is at the top left of the page
If you are embedding the SVG inside other content, then one or both of those will not be true any more.
You are attaching the mousemove events to SVG <text> elements. So the coordinates returned in the event will be in SVG coordinate space. If the SVG is scaled to any size other than 1070 x 900, then your event coordinates won't match up with page coordinates.
If you are always displaying the SVG at 1070 x 900, then your fix might be as simple as just getting the page offset of the SVG, then add that X and Y position to the position returned in the event.
However if you are scaling the SVG, then you will need to convert the coordinates from SVG coordinates to page coordinates. There are many other questions on here about that topic. For example, this one: https://stackoverflow.com/a/48354404/1292848

How do I make a HTML canvas rectangle resize along with mouse drag?

I am creating a web-based annotation application for annotating images via the HTML canvas element and Javascript. I would like the user to mouse down to indicate the start of the rectangle, drag to the desired end coordinate and let go to indicate the opposite end of the rectangle.
Currently, I am able to take the starting coordinates and end coordinates to create a rectangle on the image with the context.rects() function, however as I am uncertain on how to resize a specific rectangle on the canvas, that leaves me with the rectangle only being drawn after the user has released the mouse click.
How would I be able to resize a specific rectangle created onmousedown while dragging?
The following is the code snippet that performs the function:
var isMouseDown = false;
var startX;
var startY;
canvas.onmousedown = function(e) {
if(annMode){
isMouseDown = true;
var offset = $(this).offset();
startX = parseInt(e.pageX - offset.left);
startY = parseInt(e.pageY - offset.top);
}
};
canvas.onmousemove = function(e) {
if(isMouseDown) {
var offset = $(this).offset();
var intermediateX = parseInt(e.pageX - offset.left);
var intermediateY = parseInt(e.pageY - offset.top);
console.log(intermediateX);
}
};
canvas.onmouseup = function(e) {
if(annMode&&isMouseDown){
isMouseDown = true;
var offset = $(this).offset();
var endX = parseInt(e.pageX - offset.left);
var endY = parseInt(e.pageY - offset.top);
var width = endX - startX;
var height = endY - startY;
context.strokeStyle = "#FF0000";
context.rect(startX, startY, width, height);
context.stroke();
}
isMouseDown = false
};

Here my handy-front-end scripts come in handy!
As I understood the question, you wanted to be able to move your mouse to any point on the canvas, hold the left mouse button, and drag in any direction to make a rectangle between the starting point and any new mouse position. And when you release the mouse button it will stay.
Scripts that will help you accomplish what you are trying to do:
https://github.com/GustavGenberg/handy-front-end/blob/master/README.md#canvasjs
https://github.com/GustavGenberg/handy-front-end/blob/master/README.md#pointerjs
Both scripts just makes the code a lot cleaner and easier to understand, so I used those.
Here is a fiddle as simple as you can make it really using
const canvas = new Canvas([]);
and
const mouse = new Pointer();
https://jsfiddle.net/0y8cbao3/
Did I understand your question correctly?
Do you want a version with comments describing every line and what is does?
There are still some bugs at the moment but im going to fix those soon!
EDIT
After reading your questions again, I reacted to: "...however as I am uncertain on how to resize a specific rectangle on the canvas...".
Canvas is like an image. Once you have drawn to it, you can NOT "resize" different shapes. You can only clear the whole canvas and start over (ofcourse you can clear small portions too).
That's why the Canvas helper is so helpful. To be able to "animate" the canvas, you have to create a loop that redraws the canvas with a new frame each 16ms (60 fps).

The canvas API does not preserve references to specific shapes drawn with it (unlike SVG). The canvas API simply provides convenient functions to apply operations to the individual pixels of the canvas element.
You have a couple options to achieve a draggable rectangle:
You can position a styled div over your canvas while the user is dragging. Create a container for your canvas and the div, and update the position and size the div. When the user releases, draw your rectangle. Your container needs to have position: relative and the div needs to be absolutely positioned. Ensure the div has a higher z-index than the canvas.
In your mouse down method, set div.style.display to block. Then update the position (style.left, style.top, style.width, and style.height) as the mouse is dragged. When the mouse is released, hide it again (style.display = 'none').
You can manually store references to each item you want to draw, clear the canvas (context.clearRect), and redraw each item on the canvas each frame. This kind of setup is usually achieved through recursive usage of the window.requestAnimationFrame method. This method takes a callback and executes on the next draw cycle of the browser.
The first option is probably easier to achieve in your case. If you plan to expand the capabilities of your app further, the 2nd will provide more versatility. A basic loop would be implemented as so:
// setup code, create canvas & context
function mainLoop() {
context.clearRect(0, 0, canvas.width, canvas.height);
/** do your logic here and re-draw **/
requestAnimationFrame(mainLoop);
}
function startApp() {
requestAnimationFrame(mainLoop)
}
This tutorial has detailed explanation of event loops for HTML canvas: http://www.isaacsukin.com/news/2015/01/detailed-explanation-javascript-game-loops-and-timing
I also have a fully featured implementation on my GitHub that's part of rendering engine I wrote: https://github.com/thunder033/mallet/blob/master/src/mallet/webgl/webgl-app.ts#L115

Add Mouse pointer on movieclip In Animate CC canvas

I am trying to use a movieclip as a button, but the mouse cursor will not show on hover or on click...I have tried the answer on stack overflow, to add the movieClip.cursor = "pointer"; to the top of the code, but in my case there is no mouse pointer, (nor in Mozilla, nor in Chrome...)
In as 3.0 I used to use: buttonMode ="true", why does ...cursor = "pointer" not work in canvas/html5...it is a simple code..?
here is my code
this.stop();
this.shape_mc.cursor = "pointer";
this.shape_mc.addEventListener("click", fl_MouseClickHandler.bind(this));
function fl_MouseClickHandler()
{
this.play();
}

Disappear object on mouse click on that object in javascript. In my case I want to disappear a bouncing ball on the click of the mouse

I am trying to disappear a moving 2D ball on the click of the mouse. And also I want to do the same on the touch event if it is on the screen touch environment. The problem is that the balls keep moving in the random direction and I want to hide the ball whom I click on.
I used Javascript as I have already mentioned and here is the code which I used to draw ball.
function beginDrawCircle(a,b,color){
ctx.beginPath();
ctx.arc(a, b, ballRadius, 0, Math.PI*2);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
I am providing an extra information that I have created three such balls now the click on any one of the ball it should disappear.

Is the ball an IMG, DIV or some other tag? If so, why not add an onclick event handler and set its display to none?
<img src="ball.png" id="ball" onclick="this.style.display='none'"/>

Simply use this :
document.getElementById("ball").onclick = foo;
foo(){
this.style.display = 'none';
}

As you didn't specify if you were working with jQuery or something like that, a solution in pure Javascript could be:
//Assuming all the balls are of class ".ball"
var balls = document.querySelectorAll(".ball");
Array.prototype.forEach.call(balls, function(ball){
ball.addEventListener("click", function(event){
ball.style.display = "none";
});
});

Text element in RaphaelJS not dragging on touch device

If I create a text element and add a drag handler it does not move on a touch device. I can see that the move event gets triggered, but the element does not drag. If I create a path element and attach the same drag handlers that path element moves just fine on a touch device. All elements move fine on both Chrome and Firefox on my laptop.
Is there anything special that I have to do to get text elements to drag on a touch device?
Here's a snippet of what I'm doing. I did remove some pieces of code that were unrelated, so it may look a little strange.
var word = paper.text(xVal, yVal, "text"]);
word.drag(window.move, window.start, window.up)
window.start = function() {
this.lastDx = 0;
this.lastDy = 0;
};
window.move = function(dx, dy) {
this.transform("...T" + (dx - this.lastDx) + "," + (dy - this.lastDy));
this.lastDx = dx;
this.lastDy = dy;
return this;
};
window.up = function() {
this.lastDx = 0;
this.lastDy = 0;
};

After some trial and error I was able to get around this by creating a rectangle that "wraps" the text. I put a fill on the rectangle but with an opacity of 0 and then grouped the rectangle and the text together and made the set the draggable piece.

There is a fix in Raphael 2.1.1 for this issue. Prior versions reported NaN for dx/dy on touch devices so if you were using those for dragging then it won't work.
See https://github.com/DmitryBaranovskiy/raphael/issues/328