470,590 Members | 2,098 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,590 developers. It's quick & easy.

Drawing circle/ellipse on HTML5 canvas using mouse events

I want something like ellipse option in paint for drawing on my canvas. I have achieved this partially. The problem is i am not able to get radius of circle, currently i have hard coded it to 15. Also i want to draw ellipse(same as paint) not exact circle. This is my code for drawing circle on canvas using mouse events.Please help me with code to achieve my above mentioned requirements.
Expand|Select|Wrap|Line Numbers
  1. function tool_circle() {
  2.         var tool = this;
  3.         this.started = false;
  4.  
  5.         this.mousedown = function (ev) {
  6.             tool.started = true;
  7.             tool.x0 = ev._x;
  8.             tool.y0 = ev._y;
  9.         };
  10.  
  11.         this.mousemove = function (ev) {
  12.             if (!tool.started) {
  13.                 return;
  14.             }
  15.  
  16.             context.fillStyle = 'red';
  17.  
  18.             var distance = Math.sqrt(Math.pow(tool.x0 - ev._x, 2) + Math.pow(tool.y0 - ev._y));
  19.             context.beginPath();
  20.  
  21.             context.arc(tool.x0, tool.y0,15, 0, Math.PI * 2, false);
  22.             context.stroke();
  23.             context.fill();
  24.         };
  25.  
  26.         this.mouseup = function (ev) {
  27.             if (tool.started) {
  28.                 tool.mousemove(ev);
  29.                 tool.started = false;
  30.                 img_update();
  31.             }
  32.         };
  33.     }
Feb 6 '14 #1
0 1351

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by John Champaign | last post: by
1 post views Thread by Eric Petruzzelli | last post: by
2 posts views Thread by Catherine Lynn Smith | last post: by
3 posts views Thread by Lance | last post: by
1 post views Thread by zon7 | last post: by
1 post views Thread by sravan_reddy001 | last post: by
2 posts views Thread by kimiraikkonen | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.