openjdk-jfx
openjdk-jfx copied to clipboard
Published
20 hours ago •
javafxports
javafxports
WebView's Canvas blend mode does not work properly except source-over mode (default).
trafficstars
The behavior of global CompositeOperation property of Web Canvas is not implemented other than the default.
Expected:
Actual:
This problem can be reproduced with the following simple test.
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>
Reference
- https://www.w3.org/TR/2dcontext/#dom-context-2d-globalcompositeoperation
- https://www.w3.org/TR/compositing-1/
