By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,117 Members | 1,714 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,117 IT Pros & Developers. It's quick & easy.

Drawing circle/ellipse on HTML5 canvas using mouse events

P: 23
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
Share this question for a faster answer!
Share on Google+

Post your reply

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