JDK-8191035 : WebView Canvas Graphics2D arc renders incorrectly
- Type: Bug
- Component: javafx
- Sub-Component: web
- Affected Version: 8u144,9,10
- Priority: P3
- Status: Resolved
- Resolution: Fixed
- Submitted: 2017-11-09
- Updated: 2020-01-31
- Resolved: 2017-12-22
The Version table provides details related to the release that this issue/RFE will be addressed.
Unresolved : Release in which this issue/RFE will be addressed.
Resolved: Release in which this issue/RFE has been resolved.
Fixed : Release in which this issue/RFE has been fixed. The release containing this fix may be available for download as an Early Access Release or a General Availability Release.
To download the current JDK release, click here.
Unresolved : Release in which this issue/RFE will be addressed.
Resolved: Release in which this issue/RFE has been resolved.
Fixed : Release in which this issue/RFE has been fixed. The release containing this fix may be available for download as an Early Access Release or a General Availability Release.
To download the current JDK release, click here.
| JDK 10 | JDK 8 |
|---|---|
10Fixed  |
8u172Fixed |
Description
We have been attempting to use JavaFx WebView with canvas and 2d Graphics for
trying to recreate a pie chart, but a simple arc does not draw correctly in WebView,
Since our application requires use of drawing canvas arcs, we need this fixed.
Here is codepen which you can use to recreate the problem:
https://codepen.io/blueShell/pen/MENyRJ
Here is the same source HTML
{code}
<html>
<head>
<title></title>
</head>
<body>
<canvas id="myCanvas" width="578" height="250"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 0;
startAngle = startAngle - (Math.PI / 2.0);
var ratio = 0.59;
var endAngle = ratio * Math.PI * 2.0;
endAngle = endAngle - (Math.PI / 2.0);
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
{code}
Attached are screen shots comparing the arc in different browsers showing WebView is incorrect when compared in Chrome and IE11.
Comments
|