HTML Canvas & Javascript - Hover and Click Events

Question

Below is a script which defines two functions that draw 4 rectangular buttons and 1 circular button respectively. I am trying to implement specific Hover and Click functionality into the buttons (as described in the script alerts) but I am at a bit of a loss as to how to do this. I tried calling the makeInteractiveButton() functions on each click but this caused a lot of odd overlap and lag. I want the script to do the following:

If the circular button is hovered, I would like it's fillColour to change and if it is clicked I would like it to change again to the colours described in the code (#FFC77E for hover, #FFDDB0 for clicked). This should only happen for the duration of the hover or click.

HTML:

JavaScript:

var c=document.getElementById('game'),
    canvasX=c.offsetLeft,
    canvasY=c.offsetTop,
    ctx=c.getContext('2d')
    elements = [];

c.style.background = 'grey';

function makeInteractiveButton(x, strokeColor, fillColor) {
    ctx.strokeStyle=strokeColor;
    ctx.fillStyle=fillColor;
    ctx.beginPath();
    ctx.lineWidth=6;
    ctx.arc(x, 475, 20, 0, 2*Math.PI);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    elements.push({
        arcX: x,
        arcY: 475,
        arcRadius: 20
    });
}

b1 = makeInteractiveButton(235, '#FFFCF8', '#FFB85D');

c.addEventListener('mousemove', function(event) {
    x=event.pageX-canvasX; // cursor location
    y=event.pageY-canvasY;

    elements.forEach(function(element) {
        if (x > element.left && x < element.left + element.width && 
            y > element.top && y < element.top + element.height) { // if cursor in rect
          alert('Rectangle should undergo 5 degree rotation and 105% scale');
        }
        else if (Math.pow(x-element.arcX, 2) + Math.pow(y-element.arcY, 2) < 
                 Math.pow(element.arcRadius, 2)) { // if cursor in circle
            alert('Set b1 fillColour to #FFC77E.');
        }
    });
}, false);

c.addEventListener('click', function(event) {
    x=event.pageX-canvasX; // cursor location
    y=event.pageY-canvasY;

    elements.forEach(function(element) {
        if (x > element.left && x < element.left + element.width && 
            y > element.top && y < element.top + element.height) { // if rect clicked
            alert('Move all cards to centre simultaneously.');
        }
        else if (Math.pow(x-element.arcX, 2) + Math.pow(y-element.arcY, 2) < 
                 Math.pow(element.arcRadius, 2)) { // if circle clicked
            alert('Set b1 fillColour to #FFDDB0.');
        }
    });
}, false);

Siamand · Accepted Answer

One way is keep all element data and write a hitTest(x,y) function but when you have a lot of complex shapes its better to use a secondary canvas to render element with their ID instead of their color in it and the color of x,y in second canvas is ID of hitted element, I should mention that the second canvas is'nt visible and its just a gelper for get the hitted element.

Github Sample:

https://siamandmaroufi.github.io/CanvasElement/

Simple implementation of hitTest for Rectangles :

    var Rectangle = function(id,x,y,width,height,color){
      this.id = id;
      this.x=x;
      this.y=y;
      this.width = width;
      this.height = height;
      this.color = color  || '#7cf';
      this.selected = false;
    }

    Rectangle.prototype.draw = function(ctx){
     ctx.fillStyle = this.color;
     ctx.fillRect(this.x,this.y,this.width,this.height);
     if(this.selected){
       ctx.strokeStyle='red';
       ctx.setLineDash([5,5]);
       ctx.lineWidth = 5;
       ctx.strokeRect(this.x,this.y,this.width,this.height);
     }
    }

    Rectangle.prototype.hitTest=function(x,y){
     return (x >= this.x) && (x <= (this.width+this.x)) &&
            (y >= this.y) && (y <= (this.height+this.y));
    }

    var Paint  = function(el) {
     this.element = el;
     this.shapes = [];
    }

    Paint.prototype.addShape = function(shape){
     this.shapes.push(shape);
    }

    Paint.prototype.render = function(){
     //clear the canvas
     this.element.width = this.element.width;
     var ctx = this.element.getContext('2d');
     for(var i=0;i=0;i--){
      if(this.shapes[i].hitTest(x,y)){
       return this.shapes[i];
      }
     }
     return null;
    }

    var el = document.getElementById('panel');
    var paint = new Paint(el);
    var rectA = new Rectangle('A',10,10,150,90,'yellow');
    var rectB = new Rectangle('B',150,90,140,100,'green');
    var rectC = new Rectangle('C',70,85,200,70,'rgba(0,0,0,.5)');

    paint.addShape(rectA);
    paint.addShape(rectB);
    paint.addShape(rectC);

    paint.render();


    function panel_mouseUp(evt){
     var p = document.getElementById('panel'); 
     var x = evt.x - p.offsetLeft;
     var y = evt.y - p.offsetTop;
     var shape = paint.select(x,y);
     if(shape){ 
      alert(shape.id);
     }
     //console.log('selected shape :',shape);
    }

    function panel_mouseMove(evt){
      var p = document.getElementById('panel'); 
      var x = evt.x - p.offsetLeft;
      var y = evt.y - p.offsetTop;
      var shape = paint.select(x,y);

      paint.setSelected(shape);
    }


    el.addEventListener('mouseup',panel_mouseUp);
    el.addEventListener('mousemove',panel_mouseMove);

    body {background:#e6e6e6;}
    #panel {
     border:solid thin #ccc;
     background:#fff;
     margin:0 auto;
     display:block;
    }

just click or move over the shapes

HTML Canvas & Javascript - Hover and Click Events

Answers (1)

Github Sample:

Simple implementation of hitTest for Rectangles :

Related Questions

HTML Canvas &amp; Javascript - Hover and Click Events

Answers (1)

Github Sample:

Simple implementation of hitTest for Rectangles :

Related Questions

HTML Canvas & Javascript - Hover and Click Events