Mouseover action on image

I have this webpage dvsantos.com in the section CORPORATE VALUES. I have a kind of circle that has "People" "Customers" and others...

What I need is that when I pass the mouse over one of this sections in the circle, the text that is next to it changes, I am trying to do it with color recognition using a canvas, but it is not working in some computers and in some resolutions.

I am out of ideas on what to use here.

i am basically using this:

$(function() {

var canvas = document.getElementById('canvas1');

var img = new Image();
img.src = '../wp-content/uploads/2016/07/dvs_img5-1.png';



var ctx = canvas.getContext('2d');
img.onload = function() {
ctx.canvas.width  = img.width ; 
ctx.canvas.height = img.height; 
ctx.drawImage(img, 0, 0 ,img.width,img.height);
img.style.display = 'none';

};




 var color = document.getElementById('color');
 function pick(event) {


var pos = findPos(canvas);
var x = event.pageX - pos.x;
var y = event.pageY - pos.y;




   var pixel = ctx.getImageData(x, y, 1,1);
   var pixelData = pixel.data;

   var rgba = 'rgba(' + pixelData[0] + ',' + pixelData[1] +
              ',' + pixelData[2] + ',' + pixelData[3] + ')';