Javascript GWT JSNI未找到最近创建的元素

我想在gwt代码中创建一个canvas元素。随后，我想应用第三方javascript库，以便在新创建的canvas dom元素上绘制。下面是我想做的大致想法：

public void onModuleLoad() {
        Canvas canvas = Canvas.createIfSupported();
        canvas.getElement().setId("canvas");
        canvas.setWidth("800px");
        canvas.setHeight("500px");
        canvas.getElement().getStyle().setProperty("border", "black solid 1px");

        RootPanel.get("rootDiv").clear();
        RootPanel.get("rootDiv").add(canvas);

        getCanvas();

上面的代码创建了一个新的canvas元素，并将其添加到我当前的dom中。在添加了新的canvas之后，我想应用JSNI来获取这个canvas元素

public static native void getCanvas() /*-{
    console.log("Canvas? = " + document.getElementById("canvas"));
}-*/;

现在，我希望我已经找到了这个canvas元素。但是，我在控制台上得到以下输出：

Canvas? = null

为什么我不能访问我的新元素

顺便说一句：当我在Chrome inspector中检查DOM时，我可以看到添加的canvas元素带有指定的id。

它应该是：

public static native void getCanvas() /*-{
    console.log("Canvas? = " + $wnd.document.getElementById("canvas"));
}-*/;

在

文档之前添加
$wnd

并考虑使用JCLinux而不是JSNI。
 
应该是：
public static native void getCanvas() /*-{
    console.log("Canvas? = " + $wnd.document.getElementById("canvas"));
}-*/;

在
文档之前添加
$wnd

并考虑使用JSCORPO代替JSNI。
谢谢，解决了这个问题。关于JsInterop：我不知道应该如何在我的案例中应用它。至少我不了解JsInterop的文档或好处。这两本书都不是这个luigi家伙推荐的教程。我的意思是，我想访问第三方库的功能。在您的情况下，elemental2已经有您正在进行的两个调用：console.log和document.getElementById。编写JSNI来调用第三方库与编写JsInterop来调用它一样困难，除了JSNI将停止在GWT3中工作，并且不像JsInterop那样是类型安全的。谢谢，这解决了这个问题。关于JsInterop：我不知道应该如何在我的案例中应用它。至少我不了解JsInterop的文档或好处。这两本书都不是这个luigi家伙推荐的教程。我的意思是，我想访问第三方库的功能。在您的情况下，elemental2已经有您正在进行的两个调用：console.log和document.getElementById。编写JSNI来调用第三方库与编写JsInterop来调用它一样困难，只是JSNI将停止在GWT3中工作，并且不像JsInterop那样是类型安全的。