Click here to Skip to main content
15,867,849 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
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.

JavaScript
function tool_circle() {
       var tool = this;
       this.started = false;

       this.mousedown = function (ev) {
           tool.started = true;
           tool.x0 = ev._x;
           tool.y0 = ev._y;
       };

       this.mousemove = function (ev) {
           if (!tool.started) {
               return;
           }

           context.fillStyle = 'red';

           var distance = Math.sqrt(Math.pow(tool.x0 - ev._x, 2) + Math.pow(tool.y0 - ev._y));
           context.beginPath();

           context.arc(tool.x0, tool.y0,15, 0, Math.PI * 2, false);
           context.stroke();
           context.fill();
       };

       this.mouseup = function (ev) {
           if (tool.started) {
               tool.mousemove(ev);
               tool.started = false;
               img_update();
           }
       };
   }
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900