Thank you @dorilama و
I have made some attempts since I published the post, and I am still surprised by the unexpected results that occur, which differ from the results that occur in an external IDE.
Now the value of the property began to change, but it now sticks to the highest value it obtained from the input without getting smaller if the value of the input became smaller.
In a canvas, circles can be drawn, and the radius of these circles is determined by a property, I use slider input for this, so when the value of the input increases, the circles become bigger, but when the value of the value of the input decrease, the size of the circles stick with biggest size.
In the following snippet, I shortened the code as much as possible while the problem remained:
function(instance, properties, context) {
const ctx = instance.data.context;
const radius = properties.radius;
instance.data.canvas.addEventListener('mousedown', startDrawing);
instance.data.canvas.addEventListener('mousemove', draw);
instance.data.canvas.addEventListener('mouseup', endDrawing);
instance.data.canvas.addEventListener('mouseout', endDrawing);
// Variables to track drawing state
let isDrawing = false;
let lastX = 0;
let lastY = 0;
// start drawing
function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX || e.touches[0].clientX, e.offsetY || e.touches[0].clientY];
}
// draw a circle between two points
// r is the radius
function drawCircle(x1, y1, x2, y2,r) {
const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
const step = 5; // density of circles
const steps = Math.ceil(distance / step);
for (let i = 0; i <= steps; i++) {
const progress = i / steps;
const xPos = x1 + (x2 - x1) * progress;
const yPos = y1 + (y2 - y1) * progress;
ctx.beginPath();
ctx.arc(xPos, yPos, r, 0, Math.PI * 2);
ctx.fillStyle = properties.color;
ctx.fill();
}
}
// draw
function draw(e) {
if (!isDrawing) return;
e.preventDefault();
const x = e.offsetX || e.touches[0].clientX;
const y = e.offsetY || e.touches[0].clientY;
drawCircle(lastX, lastY, x, y, radius);
lastX = x;
lastY = y;
}
// end drawing
function endDrawing() {
if (isDrawing) {
isDrawing = false;
}
}
}
I hope this is clear and I appreciate any suggestions.