Draw arc and rect - Javascript Canvas

Javascript examples for Canvas:Rectangle

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

Description

Draw arc and rect

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 {//from   w w w  . ja  v  a2  s  .c  om
   background-color: ivory;
   padding:20px;
}
#container {
   position:relative;
   width:300px;
   height:300px;
}
#setup #canvas {
   position:absolute;
   top:10px;
   left:10px;
   width:100%;
   height:100%;
}
#setup {
   padding:10px;
   border:1px solid blue;
}
#canvas {
   border:1px solid red;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
        $("#canvas").hide();
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        function playGame(circles, rects) {
            $("#setup").hide();
            $("#canvas").show();
            ctx.fillStyle = "blue";
            for (var n = 0; n < circles; n++) {
                ctx.save();
                ctx.beginPath();
                ctx.arc(n * 25 + 15, 25, 10, 0, Math.PI * 2, false);
                ctx.closePath();
                ctx.fill();
                ctx.restore();
            }
            // draw user's rectangles
            ctx.fillStyle = "green";
            for (var n = 0; n < rects; n++) {
                ctx.save();
                ctx.beginPath();
                ctx.rect(n * 20 + 5, 75, 10, 10);
                ctx.fill();
                ctx.restore();
            }
        }
        $("#play").click(function () {
            var circleCount = $("#circles").val();
            var rectangleCount = $("#rectangles").val();
            playGame(circleCount, rectangleCount);
        });
    });

      </script> 
   </head> 
   <body> 
      <div id="container"> 
         <div id="setup">
            How many Circles 
            <input type="range" id="circles" min="1" max="10"> 
            <br>
            How many Rectangles 
            <input type="range" id="rectangles" min="1" max="10"> 
            <br> 
            <button id="play">Play</button> 
         </div> 
         <canvas id="canvas"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials