Drawing circle using Html 5

Question

I am working on a simple paint program. I want to draw rectangle and circle dynamicly. I mean I want to keep track of mouse. I used the following code to draw rectangle and it worked.

// The rectangle tool.
tools.rect = function () {
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;
  }

  var x = Math.min(ev._x,  tool.x0),
      y = Math.min(ev._y,  tool.y0),
      w = Math.abs(ev._x - tool.x0),
      h = Math.abs(ev._y - tool.y0);

  context.clearRect(0, 0, canvas.width, canvas.height);

  if (!w || !h) {
    return;
  }

  context.strokeRect(x, y, w, h);
};

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

I want to do the same for circle. But I am having trouble, I used following code, but it does not work.

// The circle tool.
tools.circle = function () {
var tool = this;
this.started = false;

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

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

  var x = Math.min(ev._x,  tool.x0),
      y = Math.min(ev._y,  tool.y0),
      r = Math.min(ev._z,  tool.z0),
      w = Math.abs(ev._x - tool.x0),
      h = Math.abs(ev._y - tool.y0);

  context.clearRect(0, 0, canvas.width, canvas.height);

  context.beginPath();
  context.arc(x, y,r,0, 2*Math.PI,true);
  context.stroke();
  context.closePath();
};

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

How can I draw a circle in this case?

Answer 1

You need to calculate the midpoint of the line connecting your start-drag and current-mouse-position.

var midX=(startingX+currentX)/2;
var midY=(startingY+currentY)/2;

Then you need to calculate the radius of a circle that fits that line.

var dx= Math.abs(startinX-canMouseX);
var dy= Math.abs(startinY-canMouseY);
var r=Math.sqrt( dx*dx + dy*dy )/2;

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/QQPRx/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var lastX;
    var lastY;
    var strokeColor="red";
    var strokeWidth=2;
    var canMouseX;
    var canMouseY;
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var isMouseDown=false;


    function handleMouseDown(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      lastX=canMouseX;
      lastY=canMouseY;
      isMouseDown=true;
    }

    function handleMouseUp(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);

      // Put your mouseup stuff here
      isMouseDown=false;
    }

    function handleMouseOut(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);

      // Put your mouseOut stuff here
      isMouseDown=false;
    }

    function handleMouseMove(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      if(isMouseDown){
        var dx= Math.abs(lastX-canMouseX);
        var dy= Math.abs(lastY-canMouseY);
        var midX=(lastX+canMouseX)/2;
        var midY=(lastY+canMouseY)/2;
        var r=Math.sqrt( dx*dx + dy*dy )/2;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.arc(midX, midY,r,0, 2*Math.PI,true);
        ctx.stroke();
      }
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Drawing circle using Html 5

Question

1 answers

solution1
2 ACCPTED 2013-02-28 22:38:08

Drawing circle using Html 5

Question

1 answers

solution1 2 ACCPTED 2013-02-28 22:38:08

solution1
2 ACCPTED 2013-02-28 22:38:08