text: Q:
  
  JavaScript/HTML Canvas: mouse detection for looped row of buttons
  
  I'm building a simple drum machine that uses canvas for the GUI. I have a row of buttons drawn with a for loop that toggle on/off when clicked.
  Here's a sample on JSFiddle
  While it works, I'm a bit embarrassed by my buttonToggleDetection function. It's the only solution I could think of to check which button the mouse is over. I'm wondering if anyone can suggest a better way to do this?
  var buttonToggleDetection = function(posx, posy, x) {
  
      if (posx < canvas.width/2 && posy > x && posy < x*2) {
  
          if (posx > x*1 && posx < x*2) {
              if (pattern[0] === 0) {
                  pattern[0] = 1;
              } else {
                  pattern[0] = 0;
              }
          }
          else if (posx > x*2 && posx < x*3) {
              if (pattern[1] === 0) {
                  pattern[1] = 1;
              } else {
                  pattern[1] = 0;
              }
          }
          else if (posx > x*3 && posx < x*4) {
              if (pattern[2] === 0) {
                  pattern[2] = 1;
              } else {
                  pattern[2] = 0;
              }
          } 
          else if (posx > x*4 && posx < x*5) {
              if (pattern[3] === 0) {
                  pattern[3] = 1;
              } else {
                  pattern[3] = 0;
              }
          }
          else if (posx > x*5 && posx < x*6) {
              if (pattern[4] === 0) {
                  pattern[4] = 1;
              } else {
                  pattern[4] = 0;
              }
          }
          else if (posx > x*6 && posx < x*7) {
              if (pattern[5] === 0) {
                  pattern[5] = 1;
              } else {
                  pattern[5] = 0;
              }
          }
          else if (posx > x*7 && posx < x*8) {
              if (pattern[6] === 0) {
                  pattern[6] = 1;
              } else {
                  pattern[6] = 0;
              }
          }
          else if (posx > x*8 && posx < x*9) {
              if (pattern[7] === 0) {
                  pattern[7] = 1;
              } else {
                  pattern[7] = 0;
              }
          }
      }
      if (posx > canvas.width/2 && posy > x && posy < x*2) {
  
          if (posx > x*9 && posx < x*10) {
              if (pattern[8] === 0) {
                  pattern[8] = 1;
              } else {
                  pattern[8] = 0;
              }
          }
          else if (posx > x*10 && posx < x*11) {
              if (pattern[9] === 0) {
                  pattern[9] = 1;
              } else {
                  pattern[9] = 0;
              }
          } 
          else if (posx > x*11 && posx < x*12) {
              if (pattern[10] === 0) {
                  pattern[10] = 1;
              } else {
                  pattern[10] = 0;
              }
          }
          else if (posx > x*12 && posx < x*13) {
              if (pattern[11] === 0) {
                  pattern[11] = 1;
              } else {
                  pattern[11] = 0;
              }
          }
          else if (posx > x*13 && posx < x*14) {
              if (pattern[12] === 0) {
                  pattern[12] = 1;
              } else {
                  pattern[12] = 0;
              }
          }
          else if (posx > x*14 && posx < x*15) {
              if (pattern[13] === 0) {
                  pattern[13] = 1;
              } else {
                  pattern[13] = 0;
              }
          }
          else if (posx > x*15 && posx < x*16) {
              if (pattern[14] === 0) {
                  pattern[14] = 1;
              } else {
                  pattern[14] = 0;
              }
          }
          else if (posx > x*16 && posx < x*17) {
              if (pattern[15] === 0) {
                  pattern[15] = 1;
              } else {
                  pattern[15] = 0;
              }
          }
      }
      return;
  }
  
  A:
  
  Your way of bounds checking the buttons seems fine...but your loop could be tightened up a bit by defining your buttons in an array and then looping through that array.
  Here's one way to draw and toggle buttons in html canvas:
  
  Define each of your button's x,y,width,height & pressed-state
  var buttons=[];
  buttons.push({x:20,y:20,width:50,height:35,text:'One',isPressed:false});
  buttons.push({x:80,y:20,width:50,height:35,text:'Two',isPressed:true});
  buttons.push({x:140,y:20,width:50,height:35,text:'Three',isPressed:false});
  
  Test if the mouse is over any button:
  for(var i=0;i<buttons.length;i++){
      var b=buttons[i];
      if(mx>b.x && mx<b.x+b.width && my>b.y && my<=b.y+b.height){
          b.isPressed=(!b.isPressed);
      }
  }
  
  Here's example code and a Demo:
  
  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");
  var cw=canvas.width;
  var ch=canvas.height;
  var $canvas=$("#canvas");
  var canvasOffset=$canvas.offset();
  var offsetX=canvasOffset.left;
  var offsetY=canvasOffset.top;
  var scrollX=$canvas.scrollLeft();
  var scrollY=$canvas.scrollTop();
  
  ctx.textAlign='center';
  ctx.textBaseline='middle';
  ctx.font='14px verdana';
  
  var buttons=[];
  buttons.push({x:20,y:20,width:50,height:35,text:'One',isPressed:false});
  buttons.push({x:80,y:20,width:50,height:35,text:'Two',isPressed:true});
  buttons.push({x:140,y:20,width:50,height:35,text:'Three',isPressed:false});
  
  draw();
  
  function draw(){
    var label;
    ctx.clearRect(0,0,cw,ch);
    for(var i=0;i<buttons.length;i++){
      var b=buttons[i];
      if(b.isPressed){
        ctx.shadowBlur=0;
        ctx.shadowOffsetX=0;
        ctx.shadowOffsetY=0;
        ctx.shadowColor=null;
        ctx.fillStyle='powderblue';
        label='ON';
      }else{
        ctx.shadowBlur=2;
        ctx.shadowOffsetX=2;
        ctx.shadowOffsetY=2;
        ctx.shadowColor='black';
        ctx.fillStyle='paleturquoise';
        label='OFF';
      }
      ctx.strokeRect(b.x,b.y,b.width,b.height);
      ctx.fillRect(b.x,b.y,b.width,b.height);
      ctx.shadowBlur=0;
      ctx.shadowOffsetX=0;
      ctx.shadowOffsetY=0;
      ctx.shadowColor=null;
      ctx.fillStyle='black';
      ctx.fillText(label,b.x+b.width/2,b.y+b.height/2);
      ctx.fillStyle='gray';
      ctx.fillText(label,b.x+b.width/2+1,b.y+b.height/2+1);
    }
  }
  
  
  function handleMouseDown(e){
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();
  
    mx=parseInt(e.clientX-offsetX);
    my=parseInt(e.clientY-offsetY);
  
    // 
    for(var i=0;i<buttons.length;i++){
      var b=buttons[i];
      if(mx>b.x && mx<b.x+b.width && my>b.y && my<=b.y+b.height){
        b.isPressed=(!b.isPressed);
      }
    }
    draw();
  
  }
  
  
  $("#canvas").mousedown(function(e){handleMouseDown(e);});
  body{ background-color: ivory; }
  #canvas{border:1px solid red;}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <h4>Click the buttons</h4>
  <canvas id="canvas" width=300 height=300></canvas>
  
  