How to integrate this menu into HTML5 canvas

I'm learning canvas and I want to make a canvas app with grid like this. I don't know how to implement this.. Any ideas would be great. Thank you in advance.

Answers


Here's a start.

Demo: http://jsfiddle.net/m1erickson/Y7m2e/

Define some "menu buttons" (actually rectangles) and store them in an array:

var rects=[];
rects.push({x:10,y:10,width:30,height:15,fillcolor:"red",isFilled:false});
rects.push({x:10,y:50,width:50,height:30,fillcolor:"blue",isFilled:false});

Draw all the menu buttons that you have defined:

function draw(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<rects.length;i++){
        var rect=rects[i];
        if(rect.isFilled){
            ctx.fillStyle=rect.fillcolor;
            ctx.fillRect(rect.x,rect.y,rect.width,rect.height);
            ctx.strokeStyle="black";
            ctx.strokeRect(rect.x,rect.y,rect.width,rect.height);
            ctx.fillStyle="gold";
            ctx.fillText("ON",rect.x+5,rect.y+10);
        }else{
            ctx.fillStyle="gray";
            ctx.fillRect(rect.x,rect.y,rect.width,rect.height);
            ctx.strokeStyle="black";
            ctx.strokeRect(rect.x,rect.y,rect.width,rect.height);
            ctx.fillStyle="gold";
            ctx.fillText("OFF",rect.x+5,rect.y+10);
        }
    }
}

Listen for mousedown events and toggle any menu button that was clicked

function handleMouseDown(e){
  e.preventDefault();
  x=parseInt(e.clientX-offsetX);
  y=parseInt(e.clientY-offsetY);

  // Toggle menu "rects" when clicked
  for(var i=0;i<rects.length;i++){
      var rect=rects[i];
      if(x>=rect.x && x<=rect.x+rect.width && y>=rect.y && y<=rect.y+rect.height)){
          rect.isFilled=!rect.isFilled;
      }
  }
  draw();
}

Need Your Help

How to open Post Urls in multithreads in python

python multithreading thread-safety threadpool urllib2

I am using python 2.7 on Windows machine. I have an array of urls accompanied by data and headers, so POST method is required.

How do I create a custom WPF control like a cartoon bubble with constant corners

.net wpf custom-controls

I need to create a rectangle bubble with rounded corners with text inside, like a cartoon speech bubble. I need the bubble to expand horizontally and vertically depending on the size of the text it