Text overlapping in javascript

Question

I am making a website and I am making a text to move alone the mouse x so I create this simple JavaScript program :

var context;
function setup(){
    createCanvas(displayWidth-50,displayHeight-200);
}
function draw(){
    textSize(75);
    fill("white");
    text("Dev Rohit",mouseX , displayHeight/2);
}

The problem with this is that the text overlap each other when I move the mouse (the previous one is not disappearing) please help me solve this problem. Thanks!

Side Note : I am using p5.js library

You are not clearing the canvas between each draw: [How to clear the canvas for redrawing](https://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing) — DBS, Oct 26 '20 at 14:54
I see no problem with the code submitted, I pasted in the p5 web editor and it worked https://editor.p5js.org/Samathingamajig/sketches/mt5E3qLg4X — Samathingamajig, Oct 26 '20 at 14:58
@Samathingamajig Can you check it now because in my pasted i forgot to remove background thing where I setted the colour to black instead i added a background image in css — Rohit, Oct 26 '20 at 15:02
@DBS if i add ``` const context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); ``` at the end of my code as : ``` function setup(){ createCanvas(displayWidth-50,displayHeight-200); } function draw(){ background("black"); textSize(75); fill("white"); text("Dev Rohit",mouseX , displayHeight/2); const context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); } ``` the text is not visible — Rohit, Oct 26 '20 at 15:06
So you asked a problem by purposefully making an error? Because not clearing the background every frame is the problem. (You should never change the background of an HTML5 canvas through css) — Samathingamajig, Oct 26 '20 at 15:07
@Samathingamajig Sorry I didn't meant to do that and is there a way to set a transparent background because if i add it in javascript file html elements will not be visible — Rohit, Oct 26 '20 at 15:10
@Rohit Seems like you want to create a div tag and change it's absolute x and absolute y, instead of using a canvas — Samathingamajig, Oct 26 '20 at 15:13
@Samathingamajig in html? If possible can you please provide a example code for that — Rohit, Oct 26 '20 at 15:13

Samathingamajig · Accepted Answer · 2020-10-26T15:49:32.080

0

This is based upon what was discussed in the comments.

You don't need the canvas to move text around, so just create a span element and move it around with vanilla JS.

const devRohit = document.getElementById("dev-rohit");

window.addEventListener("mousemove", (e) => {
  const x = e.clientX + window.pageXOffset; // The second part is for scrolling
  devRohit.style.left = `${x}px`;
})

#dev-rohit {
  user-select: none;
  position: relative;
  left: 0px;
  font-size: 75px;
  color: red;
}

<h1>This is some content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="https://www.webfx.com/blog/images/cdn.designinstruct.com/files/582-how-to-image-placeholders/generic-image-placeholder.png" alt="placeholder image" title="placeholder image" />
<div id="dev-rohit-container">
  <span id="dev-rohit">Dev Rohit</span>
</div>

edited Oct 26 '20 at 15:49

answered Oct 26 '20 at 15:40

Samathingamajig

11,839
3
12
34

So now i changed `e.clientX` to `e.clientX/10` in `const x = e.clientX + window.pageXOffset;` to give it a little movement but its starting point is at left is there a way to move it to right? I even tried changing the position from relative to absolute and changing left to 50% in css but it spans at the center but when I move my mouse it moves to the left – Rohit Oct 26 '20 at 16:05
in the middle of the screen where the text should move little left and right accourding to the mouse position like this one in this website : http://devdesk.herokuapp.com/ – Rohit Oct 26 '20 at 16:09
ANY UPDATES ON HOE TO DO THAT? – Rohit Oct 26 '20 at 17:19
i also tried map function but it does not work inside the window listener – Rohit Oct 27 '20 at 03:36

Text overlapping in javascript

1 Answers1