Click elements in canvas

by _jserodio

HTML

<canvas id='canvas' width="253" height="68" >
  
</canvas>

JavaScript

var canvas;
    var ctx;
    
    // first get your canvas
    canvas = document.getElementById('canvas');
		canvas.width = 253;
    canvas.heigth = 68;
    
    // assign the context
    ctx = canvas.getContext("2d");
    
    // asign click event to the canvas
    addEventListener("click", listener, false);
    
    function listener(e){
        // if you have 3 buttons
        var position = getCursorPosition(e);

        var limit1 = canvas.width/3;
        //console.log("limit1: " + limit1);
        var limit2 = canvas.width*2/3;
        //console.log("limit2: " + limit2);
        var limit3 = canvas.width;
        //console.log("limit3: " + limit3);
        
        if (position.x < limit1) {
        	console.log("go to facebook");
        	//window.open("http://www.facebook.com");
        } else if (position.x < limit2) {
        		console.log("go to twitter");
          	//window.open("http://www.twitter.com");
          } else if(position.x < limit3) {
          	console.log("go to whatsapp");
          	//window.open("http://www.whatsapp.com");
          }
        
        //console.log("\nx" + position.x);
        //console.log("y" + position.y);
    }
    
     function getCursorPosition(event) {
        var rect = canvas.getBoundingClientRect();
        var x = event.clientX - rect.left;
        var y = event.clientY - rect.top;
        var data = {x: x,
                    y: y};
        return data;
    }

		// load image from data url
		var imageObj = new Image();
		imageObj.onload = function() {
      	ctx.drawImage(this, 0, 0);
    };

		imageObj.src = 'https://justpaste.it/files/justpaste/d307/a11791570/file1.png';