Moving from JavaFX to HTML/JavaScript

I am looking to rebuild an old JavaFX game as a web app and have a few questions.

I am unsure if using DOM objects or the canvas is the best way to go. I am aware that having anything over a few thousand DOM objects can cause performance issues, however I am struggling to find a fitting JavaScript canvas library that has equivalents to all of the following -

1. Pane
2. StackPane
3. Button
4. TextField
5. List item

...and behaves like JavaFX, treating the canvas like the JavaFX stage.

Based on the below snippets of how I used JavaFX in the old project, is it best for me to proceed using DOM objects/DOM manipulation, if not, what JavaScript libraries fit the above criteria?

public class Container extends Pane {

    ...
    private Pane topCenter;
    ...

    public Container(String name, int leftWidth, int rightWidth, int topBackgroundWidth, int bottomBackgroundWidth, int topHeight, int bottomHeight, int centerBackgroundHeight, String centerColor, boolean addPaddingTop, boolean addPaddingBottom, int paddingLeftAdd, int paddingRightAdd, double minWidth, double minHeight, boolean movable) {
        setOnMouseClicked(event -> {
            toFront();
        });

        VBox background = new VBox();

        HBox top = new HBox();
        top.setMinHeight(topHeight);

        Pane topLeft = new Pane();
        topLeft.setPrefSize(leftWidth, topHeight);
        topLeft.setBackground(new Background(new BackgroundImage(new Image("resources/containers/" + name + "/topLeft.png", leftWidth, topHeight, false, true), BackgroundRepeat.REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, BackgroundSize.DEFAULT)));

        topCenter = new Pane();
        topCenter.setMinSize(1, topHeight);
        topCenter.setBackground(new Background(new BackgroundImage(new Image("resources/containers/" + name + "/topCenter.png", topBackgroundWidth, topHeight, false, true), BackgroundRepeat.REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, BackgroundSize.DEFAULT)));

        Pane topRight = new Pane();
        topRight.setPrefSize(rightWidth, topHeight);
        topRight.setBackground(new Background(new BackgroundImage(new Image("resources/containers/" + name + "/topRight.png", rightWidth, topHeight, false, true), BackgroundRepeat.REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, BackgroundSize.DEFAULT)));

        top.getChildren().addAll(topLeft, topCenter, topRight);
        ...

public class ClientTextField extends HBox {
    private TextField field;

    public ClientTextField(String initialValue, boolean bold) {
        Pane left = new Pane();
        left.setPrefSize(5, 17);
        left.setBackground(new Background(new BackgroundImage(new Image("resources/fields/textfield.png", 5, 17, false, true), BackgroundRepeat.REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, BackgroundSize.DEFAULT)));
        getChildren().add(left);

        field = new TextField(initialValue);
        field.setStyle("-fx-text-inner-color: #000000;");
        if (bold) {
            field.setFont(Client.volterBold);
            field.setPadding(new Insets(-2, 0, 0, 3));
        } else {
            field.setFont(Client.volter);
            field.setPadding(new Insets(-1, 0, 0, 1));
        }
        field.setBackground(new Background(new BackgroundImage(new Image("resources/fields/textfield1.png", 1, 17, false, true), BackgroundRepeat.REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, BackgroundSize.DEFAULT)));
        field.setPrefHeight(17);
        getChildren().add(field);

        Pane right = new Pane();
        right.setPrefSize(5, 17);
        right.setBackground(new Background(new BackgroundImage(new Image("resources/fields/textfield2.png", 5, 17, false, true), BackgroundRepeat.REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, BackgroundSize.DEFAULT)));
        getChildren().add(right);
    }

    public void setWidth(int w) {
        field.setPrefWidth(w - 10);
    }

    public String getText() {
        return field.getText();
    }
}

public class OffsetImageView extends Pane {
    public OffsetImageView(String img, int width, int height, boolean flipped) {
        try {
            setBackground(new Background(new BackgroundImage(new Image(img.concat(".png")), BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, BackgroundSize.DEFAULT)));
            setPrefSize(width, height);

            if (flipped)
                setScaleX(-1);

            BufferedInputStream in = (BufferedInputStream) getClass().getClassLoader().getResourceAsStream(img.concat("_offset.txt"));
            byte[] contents = new byte[1024];

            int bytesRead = 0;
            String contentsString = "";
            while ((bytesRead = in.read(contents)) != -1) {
                contentsString += new String(contents, 0, bytesRead);
            }

            String[] offsets = contentsString.split(",");

            if (flipped) {
                setTranslateX(-Integer.parseInt(offsets[0]));
                setTranslateY(-Integer.parseInt(offsets[1]));
            } else {
                setTranslateX(-Integer.parseInt(offsets[0]));
                setTranslateY(-Integer.parseInt(offsets[1]));
            }
        } catch (Exception e) {
            System.out.println(img);
        }
    }
    ...