| Issue | Fix Version | Assignee | Priority | Status | Resolution | Resolved In Build |
|---|---|---|---|---|---|---|
| JDK-8194076 | 8u172 | Arunprasad Rajkumar | P3 | Resolved | Fixed | b01 |
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.
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.
- backported by
-
JDK-8194076 WebView Canvas Graphics2D arc renders incorrectly
-
- Resolved
-