Uploaded image for project: 'JDK'
  1. JDK
  2. JDK-8229264

WebView's Canvas blend mode does not work properly except source-over

    Details

    • Type: Bug
    • Status: Open
    • Priority: P4
    • Resolution: Unresolved
    • Affects Version/s: openjfx12
    • Fix Version/s: tbd
    • Component/s: javafx
    • Labels:
    • Subcomponent:
      web
    • CPU:
      x86
    • OS:
      os_x

      Description

      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


        Attachments

          Activity

            People

            • Assignee:
              ajoseph Arun Joseph
              Reporter:
              webbuggrp Webbug Group
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated: