fill a circle with color when clicked on a correspond link using html5 - Javascript Canvas

Javascript examples for Canvas:Circle

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

Description

fill a circle with color when clicked on a correspond link using html5

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <style id="compiled-css" type="text/css">

body {//  www  .j  a va2 s.  c o m
   background-color: ivory;
   padding:20px;
}
canvas {
   border:1px solid red;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var canvas1 = document.getElementById("myCanvas1");
var ctx1 = canvas1.getContext("2d");

drawCircle(ctx, false);
drawCircle(ctx1, false);
function drawCircle(context, fill) {
    context.beginPath();
    context.arc(55, 30, 20, 0, 2 * Math.PI);
    context.closePath();
    context.stroke();
    if (fill) {
        context.fill()
    }
}
// fill the circle on click
$("#c1").click(function () {
    drawCircle(ctx, true);
});
$("#c2").click(function () {
    drawCircle(ctx1, true);
});
    });

      </script> 
   </head> 
   <body> 
      <div class="row-fluid"> 
         <div class="span1 offset3"> 
            <canvas id="myCanvas" width="100" height="100"></canvas> 
         </div> 
         <div class="span1"> 
            <br>
            <a id="c1" href="#">Hello</a> 
         </div> 
         <div class="span1"> 
            <canvas id="myCanvas1" width="100" height="100"></canvas> 
         </div> 
         <div class="span1"> 
            <br>
            <a id="c2" href="#">Hi</a> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials