title: Display text over Canvas only onmouseover
body: <p>I have created a triangle shaped image mask with the Canvas element. I have a field of text which I want to display at the bottom line of this triangle when mouse over. I can´t figure out how to make the text display only when hovering. </p>
  
  <p>I am a beginner at this... Any help appriciated!</p>
  
  <p>This is the code I got so far:</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;body&gt;
      &lt;a href="#"&gt;&lt;canvas id="canvas" width=300 height=300&gt;&lt;/canvas&gt;&lt;/a&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function masks() {
  
      var canvas=document.getElementById("canvas");
      var ctx=canvas.getContext("2d");
  
      var img=new Image();
      img.onload=function(){
          draw(ctx,img,"Hello!");
      }
      img.src="canvas01.png";
      function draw(ctx,img,text){
          ctx.beginPath();
          ctx.moveTo(canvas.width / 2, 0);
          ctx.lineTo(canvas.width, canvas.height);            
          ctx.lineTo(0, canvas.height);
          ctx.closePath();                                          
          ctx.clip();                        
          ctx.drawImage(img,0,0);
          if(text){
              ctx.fillStyle = "#f30";
              ctx.fillRect(0,canvas.height-20,canvas.width,20);
              ctx.fillStyle = "black";
              ctx.font="14pt Verdana";
              var textWidth=ctx.measureText(text).width;
              ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3); 
          }
  
      }
  
  };
  </code></pre>