integrate clickable area on canvas - Javascript Canvas

Javascript examples for Canvas:Mouse

  1. HOME
  2. Javascript
  3. Canvas
  4. Mouse

Description

integrate clickable area on canvas

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <style id="compiled-css" type="text/css">

body {/*from   w w w .ja v  a 2  s.  co  m*/
   background-color: ivory;
}
#canvas {
   border:1px solid red;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
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();
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);
    }
}
function hit(rect, x, y) {
    return (x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height);
}
function handleMouseDown(e) {
    e.preventDefault();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    for (var i = 0; i < rects.length; i++) {
        var rect = rects[i];
        if (hit(rect, mouseX, mouseY)) {
            rect.isFilled = !rect.isFilled;
        }
    }
    draw();
}
$("#canvas").mousedown(function (e) {
    handleMouseDown(e);
});
    });

      </script> 
   </head> 
   <body> 
      <h4>Click on a "menu" rect to toggle.</h4> 
      <canvas id="canvas" width="300" height="300"></canvas>  
   </body>
</html>

Related Tutorials