Convert squares to circles in canvas html - Javascript Canvas

Javascript examples for Canvas:Circle

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

Description

Convert squares to circles in canvas html

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>HTML5 canvas rounded corners</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.4.4.min.js"></script> 
      <script type="text/javascript">
    $(function(){//ww w .  jav a  2  s . c  o m
var canvas = $("#canvas");
var context = canvas.get(0).getContext("2d");

var rectX = 125;
var rectY = 125;
var rectWidth = 150;
var rectHeight = 150;
var roundedValue = 75;

context.lineJoin = "round";
context.lineWidth = roundedValue;

context.strokeRect(rectX+(roundedValue/2), rectY+(roundedValue/2), rectWidth-roundedValue, rectHeight-roundedValue);
context.fillRect(rectX+(roundedValue/2), rectY+(roundedValue/2), rectWidth-roundedValue, rectHeight-roundedValue);
    });

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="400" height="400"></canvas>  
   </body>
</html>

Related Tutorials