CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Shanky
Shanky

Reputation: 203

How can I draw circle in html5 canvas as an individual canvas?

I am working on an HTML5 project. In that, I am getting problem in drawing circle. I have canvas on which image is loaded. And when I am going to draw a circle, I am creating a new canvas (dynamically) inside which I want to draw circle. But Circle is not drawing correctly. How can I get out from this problem?

EDIT:-

Drawing Code is as follow:-

getMouse(e);
x2=mx; y2=my;
var width=x2-x1;
var height=y2-y1;
annCanvas.style.position = "absolute";

annCanvas.style.left=""+x1+"px";
annCanvas.style.top=""+y1+"px";
annCanvas.width=width+4;
annCanvas.height=height+4;
annCanvas.style.zIndex="100000";

document.getElementById("canvas").appendChild(annCanvas);

var kappa = .5522848;
 ox = ((width) / 2) * kappa, // control point offset horizontal
 oy = ((height) / 2) * kappa, // control point offset vertical
 xe =(width),           // x-end
 ye =(height),           // y-end
 xm = (width)/ 2,       // x-middle
 ym =  (height) / 2;       // y-middle
 annCanvasContext=annCanvas.getContext('2d');
 annCanvasContext.beginPath();
 annCanvasContext.lineWidth=4;
 annCanvasContext.moveTo(2, ym);
 annCanvasContext.bezierCurveTo(2, ym - oy, xm - ox, 2, xm, 2);
 annCanvasContext.bezierCurveTo(xm + ox, 2, xe, ym - oy, xe, ym);
 annCanvasContext.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
 annCanvasContext.bezierCurveTo(xm - ox, ye, 2, ym + oy, 2, ym);
 annCanvasContext.closePath();
 annCanvasContext.stroke();

If i change lineWidth to 10 or 15, it gets different shape instead of circle.

Upvotes: 1

Views: 1978

Answers (1)

Neji
Neji

Reputation: 6839

You can try this code:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

Upvotes: 2

Related Questions