There was a comment in the code about omitting a few params to get a rect.
I spotted it after having a quick look and inserting a different canvase draw command for a rect and using the x,y, width,height already used. This worked to some extent got correct sized squares and but part of the redraw was putting out circles within the drawing.
ctx.beginPath();
ctx.rect(x, y,width,height);
inserted as shown. ( only to see if it would work quickly )
var thisCoords = element.getBoundingClientRect();
var minusTop = thisCoords.top;
var minusLeft = thisCoords.left;
var currDimension = context.lineWidth;
var currRadius = currDimension/2;
var pos = {
x: (event.clientX - minusLeft) - context.lineWidth/2,
y: (event.clientY - minusTop) - context.lineWidth/2
};
roundRect(context, pos.x, pos.y, currDimension, currDimension, currRadius, true, false)
/**
* outline with a 5 pixel border radius
* @param {CanvasRenderingContext2D} ctx
* @param {Number} x The top left x coordinate
* @param {Number} y The top left y coordinate
* @param {Number} width The width of the rectangle
* @param {Number} height The height of the rectangle
* @param {Number} radius The corner radius. Defaults to 5;
* @param {Boolean} fill Whether to fill the rectangle. Defaults to false.
* @param {Boolean} stroke Whether to stroke the rectangle. Defaults to true.
*/
function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined" ) {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
ctx.beginPath();
ctx.rect(x, y,width,height);
/*
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
*/
if (stroke) {
ctx.stroke();
}
if (fill) {
ctx.fill();
}
}
I then saw the comment and tried that.
It does now work really Large square which would make sense since the params we remove.
I suspect part of the issue with that is the comment is not complete.
paintDot()
- Draws a rounded rectangle using the current state of the canvas.
- If you omit the last three params, it will draw a rectangle
I did not have time to delve further.
maybe @h_classen can have a look..
