CODEWITHSUNDEEP
javascripthtmlcsscanvas
dell
dell

Reputation: 21

Display text on Canvas in Mouse over

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.

Upvotes: 0

Views: 1496

Answers (3)

Siamand
Siamand

Reputation: 1080

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);
   //}
}

Upvotes: 2

Yogen Darji
Yogen Darji

Reputation: 3300

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>

Upvotes: 0

daniel mcgregor
daniel mcgregor

Reputation: 83

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.

Upvotes: 0

Related Questions