thib8956/js-canvas-playground
1
0
Fork 0
Code Issues Pull Requests Activity

fix color padding

Browse Source
This commit is contained in:
thib8956
2026-08-05 17:22:02 +02:00
parent b540dbdcef
commit 4ad9e76c9e
3 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
common.ts
+7 -3
View File
@@ -69,7 +69,7 @@ export function drawCircle(ctx: CanvasRenderingContext2D, center: Point, radius:
ctx.save();
ctx.beginPath();
ctx.arc(center.x, center.y, radius, 0, 2*Math.PI);
ctx.strokeStyle = `#${color.toString(16)}`
ctx.strokeStyle = rgbToString(color);
ctx.lineWidth = 5;
ctx.stroke();
ctx.restore();
@@ -79,7 +79,7 @@ export function fillCircle(ctx: CanvasRenderingContext2D, center: Point, radius:
ctx.save();
ctx.beginPath();
ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI);
ctx.fillStyle = `#${color.toString(16)}`;
ctx.fillStyle = rgbToString(color);
ctx.fill();
ctx.restore();
}
@@ -88,13 +88,17 @@ export function drawLine(ctx: CanvasRenderingContext2D, start: Point, end: Point
ctx.save();
ctx.beginPath();
if (dashed) ctx.setLineDash([5, 5]);
ctx.strokeStyle = `#${color.toString(16)}`
ctx.strokeStyle = rgbToString(color);
ctx.moveTo(start.x, start.y);
ctx.lineTo(end.x, end.y);
ctx.stroke();
ctx.restore();
}
function rgbToString(color: number) {
return `#${color.toString(16).padStart(6, '0')}`;
}
export function drawDashedLine(ctx: CanvasRenderingContext2D, start: Point, end: Point, color: number) {
drawLine(ctx, start, end, color, true);
}