How to make canvas element in html clickable?

Question

I am designing a web page which has a lot of mathematical figures .e.g rhombus ,square ,rectangle,triangle etc....

what I am trying to achieve is ,when I click on any of the figures ,it should show up a msg /info kind of thing.

I have only one canvas id ,and lot of figures in it ,how i make them clickable so that I can display the required info from each figure

markE · Accepted Answer

Here's how to use native html canvas to let users get a message about the shape they clicked:

for each shape, put their corner points in a javascript object
put all those shape-objects in an array
listen for mousedown events
in mousedown check if the mouse is inside each shape using context.isPointInPath
if the mouse is inside an object, display your message about that shape

A Demo: http://jsfiddle.net/m1erickson/wPMk5/

Example code:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    // canvas variables
    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();

    // set styles
    ctx.fillStyle="skyblue";
    ctx.strokeStyle="lightgray";
    ctx.lineWidth=2;

    // create a triangle and parallelogram object

    var triangle={
        points:[{x:25,y:100},{x:50,y:50},{x:75,y:100}],
        message:"I am a triangle"
    }

    var parallelogram={
        points:[{x:150,y:50},{x:250,y:50},{x:200,y:100},{x:100,y:100}],
        message:"I am a parallelogram"
    }

    // save the triangle and parallelogram in a shapes[] array

    var shapes=[];
    shapes.push(triangle);
    shapes.push(parallelogram);

    // function to draw (but not fill/stroke) a shape
    // (needed because isPointInPath only tests the last defined path)

    function define(shape){
        var points=shape.points;
        ctx.beginPath();
        ctx.moveTo(points[0].x,points[0].y);
        for(var i=1;i<points.length;i++){
            ctx.lineTo(points[i].x,points[i].y);
        }
    }

    // function to display a shape on the canvas (define + fill + stroke)

    function draw(shape){
        define(shape);
        ctx.fill();
        ctx.stroke();
    }

    // display the triangle and parallelogram
    draw(triangle);
    draw(parallelogram);


    // called when user clicks the mouse

    function handleMouseDown(e){
      e.preventDefault();

      // get the mouse position
      var mouseX=parseInt(e.clientX-offsetX);
      var mouseY=parseInt(e.clientY-offsetY);

      // iterate each shape in the shapes array
      for(var i=0;i<shapes.length;i++){
          var shape=shapes[i];
          // define the current shape
          define(shape);
          // test if the mouse is in the current shape
          if(ctx.isPointInPath(mouseX,mouseY)){
              // if inside, display the shape's message
              alert(shape.message);
          }
      }

    }

    // listen for mousedown events
    $("#canvas").mousedown(function(e){handleMouseDown(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Amila Iddamalgoda · Answer

If you can use SVG instead you can achive this goal very easily. Using http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html you can draw relevant shapes and you can get the svg code. Add onclick() events to it .

By this online tool you can create shapes enter image description here

Click SVG to get the code

enter image description here

Code

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <rect id="svg_1" height="74" width="150" y="95" x="58" stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <ellipse ry="35" rx="42" id="svg_2" cy="216" cx="158" stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <ellipse ry="36" rx="80" id="svg_3" cy="123" cx="342" stroke-width="5" stroke="#000000" fill="#0000ff"/>
  <path id="svg_4" d="m265,257l63,-59l82,47l-22,71l-84,5l-39,-64z" stroke-width="5" stroke="#000000" fill="#0000ff"/>
 </g>
</svg>

You can add onclick events to this.And also following shows adding jquery title mouse over also.

 <rect id="svg_29" class="popup_tool" title="Message you want to popup when mouse over" height="17" width="20" y="224" x="452" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="3" stroke="#000000" fill="#ff0000"/>

Hope you got the answer

How to make canvas element in html clickable?

Tags:

javascript

html

canvas

Sham

2 Answers

markE

Amila Iddamalgoda

Recent Activity

Donate For Us

How to make canvas element in html clickable?

Tags:

javascript

html

canvas

Sham

2 Answers

markE

Amila Iddamalgoda

Related questions

Recent Activity

Donate For Us