JavaFX web view displays improperly

[Thrameos]

using dygraph 2.1.0 on windows 10 with java version 1.8.0_181, I am encountering difficulties of refresh and hoping that someone has a work around.

Using the following source code to display the demo page for dygraph

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.*;

public class WebViewTest extends Application
{

  @Override
  public void start(Stage stage)
  {
    System.out.print(java.lang.System.getProperty("java.version"));
    String url = "http://dygraphs.com/gallery/#g/annotations";
    stage.setTitle(url);
    Scene scene = new Scene(new Group());
    BorderPane root = new BorderPane();
    final WebView browser = new WebView();
    final WebEngine webEngine = browser.getEngine();
    webEngine.load(url);
    root.setCenter(browser);
    scene.setRoot(root);
    stage.setScene(scene);
    stage.show();
  }

  public static void main(String[] args)
  {
    launch(args);
  }

}

I get a graph that does not render properly when interacted with. For example if I scroll across a few points and highlight them then attempt to zoom the display appears as shown below.

The key problem appears to be that javafx webengine does not clear the area under the <div> element prior to a redraw. Thus every update to the area results in more lines being rendered. Other javascript libraries that use <canvas> instead do not appear to suffer the issue.

I am sure the main issue is with the javafx webengine browser and not with the dygraph library, but is there any easy work around such as switching the dygraph to use a canvas element, or to render a background colored box prior to updating the screen? Thanks in advance.

[Thrameos]

Looking deeper at the issue it appears that dygraph is doing rendering on multiple canvas and is expected each of the canvases to be clearable independently. Thus calls to clearRect() on the overlay canvas are expected to clear those elements painted on that layer. The webview is treating all layers as being the same thus clearRect() is not removing the previously painted elements resulting in multiple overlapping images. It seems unlikely this can be addressed as a workaround.