Drawing a circle using mouse position

Question

I am trying to draw a circle by clicking and dragging the mouse. The way you will do in PowerPoint or something like that. The center of the circle appears in strange places, and I cannot explain it.

Here is jsfiddle: https://jsfiddle.net/h8t3hfa2/2/

This is how I get the start and end position;

$('#c').mousedown(function(event) {
  var parentOffset = $(this).offset();
  circle = new Circle();
  circle.start['x'] = event.pageX - parentOffset.left;
  circle.start['y'] = event.pageY - parentOffset.top;

});

$('#c').mouseup(function(event) {
  var parentOffset = $(this).offset();
  circle.end['x'] = event.pageX - parentOffset.left;
  circle.end['y'] = event.pageY - parentOffset.top;
  circle.draw(canvas[0]);

});

When I register the midpoint on the console, it looks right, but the circle appears somewhere else. Any ideas?

Answer 1

This is because you scale your canvas with CSS. Remember, canvas sizes are different from CSS (style) canvas sizes.

:

canvas.get(0).width = canvas.width();
canvas.get(0).height = canvas.height();

https://jsfiddle.net/h8t3hfa2/3/

var Circle = function() {
  this.start = [];
  this.end = [];
}
Circle.prototype.draw = function(canvas) {
  var me = this;

  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var mid = me.getcenter();
    var rad = me.getradius();
    console.log(mid, rad);
    ctx.beginPath();
    console.log(mid['x'], mid['y']);
    ctx.arc(mid['x'], mid['y'], rad, 0, 360);
    ctx.stroke();
  }

};

Circle.prototype.getcenter = function() {
  var me = this;
  //Check the start and end are set
  var centerX = (me.start['x'] + me.end['x']) / 2;
  var centerY = (me.start['y'] + me.end['y']) / 2;

  return {
    'x': centerX,
    'y': centerY
  };
};

Circle.prototype.getradius = function() {
  var me = this;
  var distX = Math.abs(me.start['x'] - me.end['x']);
  var distY = Math.abs(me.start['y'] - me.end['y']);

  return distX / 2;
};

var circle;
var canvas = $('#c');

// added only these two lines
canvas.get(0).width = canvas.width();
canvas.get(0).height = canvas.height();

$('#c').mousedown(function(event) {
  var parentOffset = $(this).offset();
  circle = new Circle();
  circle.start['x'] = event.pageX - parentOffset.left;
  circle.start['y'] = event.pageY - parentOffset.top;

});

$('#c').mouseup(function(event) {
  var parentOffset = $(this).offset();
  circle.end['x'] = event.pageX - parentOffset.left;
  circle.end['y'] = event.pageY - parentOffset.top;
  circle.draw(canvas[0]);

});

canvas {background-color: white;height: 100%;width: 100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='c'></canvas>

, onresize reset , , . , , ( ) .

Answer 2

height: 100%; width: 100%; .

, getradius min ( max) distX distY ( hardcoding distX), .

Circle.prototype.getradius = function() {
  var me = this;
  var distX = Math.abs(me.start['x'] - me.end['x'])/2;
  var distY = Math.abs(me.start['y'] - me.end['y'])/2;

  return Math.min(distX, distY);
};