在鼠标悬停在画布上显示文本

Question

Currently, I'm working on Below Example https://codepen.io/jkiss/pen/OVEeqK here I'm changed the code to display on the canvas

 var canvas = document.getElementById('nokey');
   var ctx = canvas.getContext('2d');
  ctx.fillText("StacOverFlow",30,80);

But I'm not able to display the text by using above code. Could any one please help to display the text.

Answer 1

in your example https://codepen.io/jkiss/pen/OVEeqK , you have to add some code to render function like following:

live example: https://codepen.io/siamand/pen/BdPBMq

// Render
function render(){
    ctx.clearRect(0, 0, can_w, can_h);

    renderBalls();

    renderLines();

    updateBalls();

    addBallIfy();

    addCustomStuff();


    window.requestAnimationFrame(render);
}

function addCustomStuff(){
   //if(mouse_in){  // IF condition for show text when mouse_in
      ctx.fillStyle = 'red';
      ctx.fillText("StackOverflow",mouse_ball.x,mouse_ball.y);
   //}
}

Answer 2

you need to add the following html code:

<canvas id="nokey" width="800" height="800"> Your Browser Don't Support Canvas, Please Download Chrome ^_^`` </canvas>

This is because when you call var canvas = document.getElementById('nokey'); you are trying to get the canvas named 'nokey' in your example.

Answer 3

You need to use ctx.fillStyle and ctx.font also to display font on canvas.

 var canvas = document.getElementById('nokey'), can_w = parseInt(canvas.getAttribute('width')), can_h = parseInt(canvas.getAttribute('height')), ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "blue"; ctx.font = "bold 16px Arial"; ctx.fillText("StackOverFlow", 30, 80); 

 <canvas id="nokey" width="800" height="800"> Your Browser Don't Support Canvas, Please Download Chrome ^_^`` </canvas>