When attempting to draw a simple circle on a canvas, everything works smoothly in Chrome but encounters issues in Safari.
What's puzzling is that even though I can retrieve the x position of the circle as expected, it simply fails to render correctly.
canvas.context.beginPath();
canvas.context.strokeStyle = 'rgba(255, 153, 0, 1)';
canvas.context.lineWidth = 10;
canvas.context.arc(x, y, radius, 0, Math.PI * 2);
canvas.context.stroke();
canvas.context.closePath();
The custom variables width, height, and radius are dynamically calculated during runtime, with sample values being:
x = 155;
y = 155;
radius = 25.5;
However, these values are subject to change within a certain range.
This code successfully displays an orange circle in Chrome, yet remains invisible in Safari. Any insights into why this discrepancy occurs?