I have made a marker that draws when the mouse click is held down. I now want to change the size of this marker relative to the speed of the cursor. My code is as follows :
class App {
constructor(event, x) {
this.container = this.createContainer();
this.canvas = this.createCanvas();
this.ctx = this.canvas.getContext("2d");
this.addEventListeners();
this.isDrawing = this.letDrawing();
}
createContainer = () => {
const container = document.createElement("div");
container.className = "app-container";
document.body.appendChild(container);
return container;
};
createCanvas = () => {
const canvas = document.createElement("canvas");
canvas.className = "app-canvas";
this.container.appendChild(canvas);
canvas.width = this.container.getBoundingClientRect().width;
canvas.height = this.container.getBoundingClientRect().height;
return canvas;
};
addEventListeners = () => {
this.canvas.addEventListener("mousemove", this.onMouseMove);
this.canvas.addEventListener("mousedown", this.onMouseDown);
document.addEventListener("mouseup", this.onMouseUp);
};
letDrawing = () => {
this.isDrawing = false;
};
onMouseDown = () => {
this.isDrawing = true;
};
onMouseMove = (event) => {
if (this.isDrawing === true) {
this.drawBall(event.x, event.y);
}
};
onMouseUp = () => {
this.isDrawing = false;
};
drawBall = (x, y) => {
this.ctx.beginPath();
this.ctx.arc(x, y, 0, Math.PI * 2);
this.ctx.fillStyle = "#6f0ecf";
this.ctx.fill();
this.ctx.closePath();
};
}
export { App };
I was thinking of using previous position of X and Y, and doing something like below… Can I use deltaX in this scenario?
Any help on how to do this would be much appreciated!!
onMouseMove = (event) => {
if (this.isDrawing === true) {
this.drawBall(event.x, event.y);
this.previousX = this.currentX;
this.currentX = event.x;
distance = this.currentX - this.previousX;
}
};
onMouseMoveSpeed = () => {
const size = speed * 10 + 10;
};
onMouseUp = () => {
this.isDrawing = false;
};
drawBall = (x, y, size) => {
this.ctx.beginPath();
this.ctx.arc(x, y, size, 0, Math.PI * 2);
this.ctx.fillStyle = "#6f0ecf";
this.ctx.fill();
this.ctx.closePath();
};