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

Canvas in webview displayed with wrong scale on Windows

    Details

    • Type: Bug
    • Status: Open
    • Priority: P3
    • Resolution: Unresolved
    • Affects Version/s: openjfx13, openjfx14
    • Fix Version/s: openjfx14
    • Component/s: javafx
    • Labels:
    • Subcomponent:
      web
    • CPU:
      x86_64
    • OS:
      windows_10

      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

          Activity

            People

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

              Dates

              • Created:
                Updated: