The following code examples shows a method that creates a rectangle and circle on the canvas. We use the strokeRect and fillRect methods to draw and fill rectangle.
These methods requires the following parameters:
starting points(x,y) : specify the x and y coordinates (with 0,0 in the upper-left corner of the canvas
height: specify the height of the rectangle.
width: specify the width of the rectangle.
The following example draws the two rectangles(stroke and fill).
<html>
<head>
<title>Draw Arc</title>
<style type="text/css">
#MyCanvas {border:1px solid black;}
</style>
<script type="text/javascript">
function drawRectangle() {
var ctx;
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
ctx.font = "11pt Helvetica";
ctx.strokeStyle = "#2954D3";
ctx.strokeRect(50, 20, 75, 75);
ctx.fillText("stroke Rectangle", 40, 120);
ctx.fillStyle = "#2954D3";
ctx.fillRect(200, 20, 75, 75);
ctx.fillText("Fill Rectangle", 190, 120);
}
}
</script>
</head>
<body onload="drawRectangle();">
<canvas id="MyCanvas" width="400" height="200">
This browser or document mode doesn't support canvas object</canvas>
</body>
</html>Draw Circle
To draw arcs and circles, we use the arc method like as:
arc(x, y, radius, startAngle, endAngle, anticlockwise)
Where x and y are the coordinates of the circle’s center. Radius is self explanatory. The startAngle and endAngle parameters for the start and end points of the arc in radians from the x axis. See here : Draw Arc or Circle on HTML5 canvas