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

Canvas in webview displayed with wrong scale on Windows

    Details

    • Type: Bug
    • Status: Resolved
    • Priority: P3
    • Resolution: Fixed
    • Affects Version/s: openjfx11, openjfx13, openjfx14
    • Fix Version/s: openjfx15
    • Component/s: javafx
    • Subcomponent:
      web
    • CPU:
      x86_64
    • OS:
      windows_10

      Backports

        Description

        ADDITIONAL SYSTEM INFORMATION :
        Windows 10 x64, Build 18362.356, Version 1903
        JRE: 13.0.1 win x64
        JavaFX: 13.0.1
        This issue also is reproducible with Java 11 but does not occupy when running with java 8.

        A DESCRIPTION OF THE PROBLEM :
        When there is a scale factor set on windows via windows setting. Then the content inside web canvas will SHRINK accordingly. The exact path to the scale setting on Windows 10 is [Settings] -> [System] ->[Display] ->[Scale and Layout] ->[Change the size of text, app, and other items]. It happens when the value is not 100%

        REGRESSION : Last worked in version 8u231

        STEPS TO FOLLOW TO REPRODUCE THE PROBLEM :
        Step 1: Write a simple JavaFX program with just a Webview, and loads following HTML snippet.
        ================
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Canvas Demo</title>
        </head>
        <body>

        <canvas id="myCanvas" width="100" height="100" style="width:100px; height:100px;border:10px solid #d3d3d3;transform: scale(1,1)"> </canvas>

        <script >
          window.onload = function() {
            let c = document.getElementById("myCanvas");
            let ctx = c.getContext("2d");
            ctx.fillStyle = "red";
            ctx.fillRect(0, 0, 100, 100);
          };
        </script>
        </body>
        </html>
        ================
        Step 2 : run it with a Java 11/13 with JavaFX

        EXPECTED VERSUS ACTUAL BEHAVIOR :
        EXPECTED -
        A red square fulfills the gray box.
        ACTUAL -
        A red square NOT fulfills the gray box.

        ---------- BEGIN SOURCE ----------
        import javafx.application.Platform;
        import javafx.embed.swing.JFXPanel;
        import javafx.scene.Scene;
        import javafx.scene.layout.BorderPane;
        import javafx.scene.web.WebEngine;
        import javafx.scene.web.WebView;

        import javax.swing.*;
        import java.awt.*;
        import java.awt.event.WindowAdapter;
        import java.awt.event.WindowEvent;

        public class JavaFxCanvasIssueReproducer {
            public static void main(String[] args) {
                JFrame frame = new JFrame("Java FX Canvas Issue Reproducer");
                frame.setSize(new Dimension(800, 600));
                frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);

                JFXPanel jfxPanel = new JFXPanel();

                frame.add(jfxPanel);
                frame.addWindowListener(new WindowAdapter() {
                    @Override
                    public void windowOpened(WindowEvent e) {
                        Platform.runLater(
                                () -> {
                                    WebView webview = new WebView();
                                    WebEngine webEngine = webview.getEngine();
                                    webEngine.setJavaScriptEnabled(true);
                                    BorderPane borderPane = new BorderPane();
                                    borderPane.setCenter(webview);
                                    Scene scene = new Scene(borderPane);
                                    jfxPanel.setScene(scene);
                                    webEngine.loadContent(WEB_HTML);
                                }
                        );
                    }
                });
                frame.setVisible(true);
            }
            private static final String WEB_HTML="" +
                    "<!DOCTYPE html>\n" +
                    "<html lang=\"en\">\n" +
                    "<head>\n" +
                    " <meta charset=\"UTF-8\">\n" +
                    " <title>Canvas Demo</title>\n" +
                    "</head>\n" +
                    "<body>\n" +
                    "\n" +
                    "<canvas id=\"myCanvas\" width=\"100\" height=\"100\" style=\"width:100px; height:100px;border:10px solid #d3d3d3;transform: scale(1,1)\"> </canvas>\n" +
                    "<div>If the gray box is not fulfilled with red, then the defect reproduced sucessfully.</div>\n" +
                    "\n" +
                    "<script >\n" +
                    " window.onload = function() {\n" +
                    " let c = document.getElementById(\"myCanvas\");\n" +
                    " let ctx = c.getContext(\"2d\");\n" +
                    " ctx.fillStyle = \"red\";\n" +
                    " ctx.fillRect(0, 0, 100, 100);\n" +
                    " };\n" +
                    "</script>\n" +
                    "</body>\n" +
                    "</html>";
        }
        ---------- END SOURCE ----------

        CUSTOMER SUBMITTED WORKAROUND :
        Change the scale value at [Settings] -> [System] ->[Display] ->[Scale and Layout] ->[Change the size of text, app, and other items] to 100%.

        FREQUENCY : always


          Attachments

            Issue Links

              Activity

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved: