How to draw circle on canvas when mouse moves
books
I am trying to draw a circle on the canvas with mouse movement, but without success. My code is as follows:
var damages_canvas = document.getElementById('damages-area');
var ctx_damages = damages_canvas.getContext('2d');
var circle_rect = damages_canvas.getBoundingClientRect();
var circle_drag = false;
var circle_canvas_update = true;
var circles = [];
var markerColor = "#f00";
damages_canvas.addEventListener('mousedown', drawCircleMouseDown, false);
damages_canvas.addEventListener('mouseup', drawCircleMouseUp, false);
damages_canvas.addEventListener('mousemove', drawCircleMouseMove, false);
requestAnimationFrame(updateCircleCanvas);
function updateCircleCanvas(){
if(circle_canvas_update){
drawCircleCanvas();
circle_canvas_update = false;
}
requestAnimationFrame(updateCircleCanvas);
}
function drawCircle(circle){
var startX = circle.startX,
endX = circle.endX,
startY = circle.startY,
endY = circle.endY;
ctx_damages.clearRect(0,0,damages_canvas.width,damages_canvas.height);
ctx_damages.beginPath();
ctx_damages.moveTo(startX, startY + (endY-startY)/2);
ctx_damages.bezierCurveTo(startX, startY, endX, startY, endX, startY + (endX-startY)/2);
ctx_damages.bezierCurveTo(endX, endY, startX, endY, startX, startY + (endY-startY)/2);
ctx_damages.closePath();
ctx_damages.stroke();
}
function drawCircleCanvas(){
ctx_damages.setTransform(1,0,0,1,0,0);
ctx_damages.clearRect(0, 0, damages_canvas.width, damages_canvas.height);
ctx_damages.fillStyle = "transparent"; // Color
ctx_damages.strokeStyle = markerColor; // Color
circles.forEach(drawCircle)
}
function drawCircleMouseDown(e){
circle = {
startX : e.offsetX - circle_rect.left,
startY : e.offsetY - circle_rect.top,
endX : 10,
endY : 10
};
circle_drag = true;
circles.push(circle);
circle_canvas_update = true;
}
function drawCircleMouseUp(){
circle_drag = false;
circle_canvas_update = true;
}
function drawCircleMouseMove(e){
if(circle_drag){
circle.endX = e.offsetX - circle_rect.left;
circle.endY = e.offsetY - circle_rect.top;
circle_canvas_update = true;
}
}#damages-area {background:#f9f9f9}<canvas id="damages-area" width=600 height=600></canvas>I want to draw a circle , not an ellipsis or anything. But in my case, I got something weird.
Any idea what should I do?
Durga
Use Arc to draw an arc in the canvas. for circles startand endangles will be 0and2*Math.PI
var damages_canvas = document.getElementById('damages-area');
var ctx_damages = damages_canvas.getContext('2d');
var circles = [];
var markerColor = "#f00";
var offsetX = damages_canvas.offsetLeft;
var offsetY = damages_canvas.offsetTop;
var startX;
var startY;
var isMouseDown = false;
var circle, radius;
damages_canvas.addEventListener('mousedown', drawCircleMouseDown, false);
damages_canvas.addEventListener('mouseup', drawCircleMouseUp, false);
damages_canvas.addEventListener('mousemove', drawCircleMouseMove, false);
function Circle(startX, startY) {
this.startX = startX;
this.startY = startY;
this.radius;
this.draw = function() {
ctx_damages.beginPath();
ctx_damages.arc(this.startX, this.startY, this.radius, 0, 2 * Math.PI);
ctx_damages.strokeStyle = markerColor;
ctx_damages.stroke();
}
}
function drawCircleMouseDown(e) {
startX = parseInt(e.clientX - offsetX);
startY = parseInt(e.clientY - offsetY);
isMouseDown = true;
circle = new Circle(startX, startY);
circles.push(circle);
}
function drawCircleMouseUp() {
isMouseDown = false;
circle = null;
}
function drawCircleMouseMove(e) {
if (!isMouseDown) {
return;
}
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
circle.radius = getDistance(startX, startY, mouseX, mouseY);
ctx_damages.clearRect(0, 0, damages_canvas.width, damages_canvas.height);
circles.forEach(function(circ) {
circ.draw();
});
}
function getDistance(p1X, p1Y, p2X, p2Y) {
return Math.sqrt(Math.pow(p1X - p2X, 2) + Math.pow(p1Y - p2Y, 2))
}#damages-area {background:#f9f9f9}<canvas id="damages-area" width=600 height=600></canvas>