Balloon Popup Extender on html5 Canvas - Javascript Canvas

Javascript examples for Canvas:Example

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

Description

Balloon Popup Extender on html5 Canvas

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <!-- reset css --> 
      <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
      <style>

#canvas{border:1px solid red;}
#balloon{ position:absolute; left:-200px; }

      </style> 
      <script>
$(function(){//from   w  w w  . ja  va2 s. co m
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var balloon=document.getElementById("balloon");
    var popCtx=balloon.getContext("2d");

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var circles=[];
    circles.push({x:40,  y:30, radius:15,color:"red",  info:"I'm red."});
    circles.push({x:150, y:150,radius:25,color:"green",info:"I'm centered."});
    circles.push({x:110, y:85, radius:40,color:"blue", info:"I'm big."});

    for(var i=0;i<circles.length;i++){
        drawCircle(circles[i]);
    }

    $("#canvas").click(function(e){
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);
        // see if we clicked on any targets
        for(var i=0;i<circles.length;i++){
            var circle=circles[i];
            var dx=circle.x-mouseX;
            var dy=circle.x-mouseY;
            var radius=circle.radius;
            // true if we clicked in the target circle
            if(dx*dx+dy*dy<=radius*radius){
                drawBalloon(circles[i].x+radius,circles[i].y-100,circles[i].info);
            }
        }
    });

    $("#balloon").click(function hideBalloon(e){ $("#balloon").css({left:-200}); });
    function drawCircle(circle){
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle=circle.color;
        ctx.strokeStyle="black";
        ctx.lineWidth=3;
        ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        ctx.restore();
    }
    function drawBalloon(X,Y,theInfo){
        popCtx.save();
        popCtx.fillStyle="#FD0";
        popCtx.strokeStyle="#000";
        // draw the balloon
        popCtx.beginPath();
        popCtx.moveTo(52,02);
        popCtx.quadraticCurveTo(02,02,02,42);
        popCtx.quadraticCurveTo(02,77,27,77);
        popCtx.quadraticCurveTo(27,102,07,102);
        popCtx.quadraticCurveTo(37,102,42,77);
        popCtx.quadraticCurveTo(102,77,102,42);
        popCtx.quadraticCurveTo(102,02,52,02);
        popCtx.lineWidth=3;
        popCtx.stroke();
        popCtx.fill();
        // draw theInfo
        popCtx.font="10pt arial";
        popCtx.fillStyle="black";
        popCtx.fillText(theInfo,10,50);
        popCtx.restore();
        $("#balloon").css({left:offsetX+X, top:offsetY+Y});
    }
});

      </script> 
   </head> 
   <body> 
      <p>Click circles to popup an info balloon</p> 
      <p>When info balloon appears, click it do dismiss it</p> 
      <canvas id="canvas" width="300" height="300"></canvas> 
      <canvas id="balloon" width="105" height="105"></canvas>  
   </body>
</html>

Related Tutorials