title: Simple Button in HTML5 canvas
body: <p>I am new to Javascript and i am in the process of making a project web based (HTML)
  With my basic knowledge i have managed to create a form and drawn a rectangle on it.</p>
  
  <p>I would now like to be able to click the rectangle , using it like a button but I cannot seem to find any tutorials or answers that can help me.</p>
  
  <p>This is the code for my rectangle :</p>
  
  <pre><code>function Playbutton(top, left, width, height, lWidth, fillColor, lineColor) {
      context.beginPath();
      context.rect(250, 350, 200, 100); 
      context.fillStyle = '#FFFFFF'; 
      context.fillStyle = 'rgba(225,225,225,0.5)';
      context.fillRect(25,72,32,32);
      context.fill(); 
      context.lineWidth = 2;
      context.strokeStyle = '#000000'; 
      context.stroke();
      context.closePath();
      context.font = '40pt Kremlin Pro Web';
      context.fillStyle = '#000000';
      context.fillText('Start', 345, 415);
    }
  </code></pre>
  
  <p>I am aware that you need to find the x,y coordinates and mouse position in order to click in the area of the rectangle. But i'm really stuck at this point.
  It maybe really simple and logic, but we have all had to go past this stage.</p>