ADDITIONAL SYSTEM INFORMATION :
openjdk version "12.0.1" 2019-04-16
OpenJDK Runtime Environment AdoptOpenJDK (build 12.0.1+12)
OpenJDK 64-Bit Server VM AdoptOpenJDK (build 12.0.1+12, mixed mode, sharing)
A DESCRIPTION OF THE PROBLEM :
The behavior of global CompositeOperation property of Web Canvas is not implemented other than the default.
A comparative image of the rendering result using the attached simple test program is uploaded to github.
You can check it at the following URL.
* https://github.com/javafxports/openjdk-jfx/issues/552
STEPS TO FOLLOW TO REPRODUCE THE PROBLEM :
1. Start the attached test program.
2. Open the HTML file with a web browser.
3. Compare the rendering results of steps 1 and 2
EXPECTED VERSUS ACTUAL BEHAVIOR :
EXPECTED -
Rendering results are the same as Safari, Edge, Chrome, and Firefox. (Rendering results as specified)
ACTUAL -
Rendering results in blend modes except source-over (and normal) mode are incorrect.
---------- BEGIN SOURCE ----------
public class WebCanvasBlendModeTest extends Application{
@Override
public void start(Stage primaryStage) throws Exception {
WebView webView = new WebView();
try(InputStream ins= WebCanvasBlendModeTest.class.getResourceAsStream("test-webcanvas-blend.html")){
final String HTML = new String( ins.readAllBytes(), StandardCharsets.UTF_8 );
webView.getEngine().loadContent(HTML);
}
Scene scene = new Scene(new BorderPane(webView), 1500, 800, null);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}
----------------------
test-webcanvas-blend.html
<html>
<style>
canvas{border: 1px solid gray;}
</style>
<body>
<script>
var draw = function(canvasId, globalCompositeOperation) {
var canvas = document.createElement("canvas");
canvas.setAttribute("width", "170px");
canvas.setAttribute("height", "170px");
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#cc00cc';
ctx.fillRect(canvas.width/4, canvas.height/4, canvas.width/2, canvas.height/2);
ctx.save();
ctx.globalCompositeOperation = globalCompositeOperation;
ctx.fillStyle = '#cccc00';
ctx.beginPath();
ctx.arc(canvas.width*3/4, canvas.height*3/4, canvas.width/4, 0, Math.PI*2, true);
ctx.fill();
ctx.restore();
ctx.font = "16px sans-serif";
ctx.fillStyle = '#000000';
ctx.fillText(globalCompositeOperation, 5, 30);
document.body.appendChild(canvas);
}
var compositeTypes = [
// https://www.w3.org/TR/2dcontext/#dom-context-2d-globalcompositeoperation
'source-atop',
'source-in',
'source-out',
'source-over',
'destination-atop',
'destination-in',
'destination-out',
'destination-over',
'lighter',
'copy',
'xor',
//see: SEE: https://www.w3.org/TR/compositing-1/
// blend mode
'normal',
'multiply',
'screen',
'overlay',
'darken',
'lighten',
'color-dodge',
'color-burn',
'hard-light',
'soft-light',
'difference',
'exclusion',
'hue',
'saturation',
'color',
'luminosity',
// composite mode
'clear',
'plus-darker',
'plus-lighter',
];
for (var i = 0; i < compositeTypes.length; i++) {
draw('canvas'+(i+1), compositeTypes[i]);
}
</script>
</body>
</html>
---------- END SOURCE ----------
FREQUENCY : always