Javascript 在网络视图中显示画布

我制作了一个javascript项目，它允许绘制函数。我想把它集成到一个网络视图中。我的问题是，只有画布不显示

这是我的活动代码和我的js和html文件

`公共类图表扩展了碎片活动{

@InjectView( R.id.webview)
 WebView webview;

public class WebAppInterface {
    private Context context;

    public WebAppInterface(Context context) {
        this.context = context;
    }
    @JavascriptInterface
    public String loadData() {
     return new Gson().toJson(context);
    }


}
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_graphe);
    ButterKnife.inject(this);
}
@TargetApi(Build.VERSION_CODES.JELLY_BEAN)
@Override
protected void onResume() {
    super.onResume();

    final WebSettings ws = webview.getSettings();
    ws.setJavaScriptEnabled(true);
    ws.setPluginState(WebSettings.PluginState.ON);
    ws.setAllowFileAccess(true);
    ws.setDomStorageEnabled(true);
    ws.setAllowContentAccess(true);
    ws.setAllowFileAccessFromFileURLs(true);
    ws.setAllowUniversalAccessFromFileURLs(true);
    webview.setWebViewClient(new WebViewClient());
    webview.setWebChromeClient(new WebChromeClient());
    webview.addJavascriptInterface(new WebAppInterface(this), "Android");
    webview.loadUrl("file:///android_asset/Plotter/site.html");
}


public void onBackPressed (){
    Intent back= new Intent(this, MainActivity.class);
    finish();
    startActivity(back);

};

var can=$（“#can”）[0]；
var ctx=can.getContext（“2d”）；
var阶段={
宽度：800，
身高：500
};
var fPoints=[]；
var fdPoints=[]；
var data==JSON.parse（Android.loadData（））；；
var cursor={x:0，y:0}；
变量视图={
X:-20，
Y:-12，
宽度：40，
身高：25
};
var LQ=3000；
var-vp；
var标志={}；
var f=函数（x）{
返回1/x+4/x；
}
函数平移（x，y）{
y=（VIEW.HEIGHT-y+VIEW.y）*STAGE.HEIGHT/VIEW.HEIGHT；
x=（x-VIEW.x）*STAGE.WIDTH/VIEW.WIDTH；
返回{
x:x，
y:y
};
}
函数translateBack（x，y）{
y=-1*y*VIEW.HEIGHT/STAGE.HEIGHT-VIEW.HEIGHT-VIEW.y；
x=x*VIEW.WIDTH/STAGE.WIDTH+VIEW.x；
返回{
x:x，
y:y
};
}
函数计算（回调）{
fPoints=[]；
fdPoints=[]；
var lastX=null；
var lastY=null；
var lastm=null；
var upperBorder=VIEW.WIDTH+VIEW.X；
var add=视图宽度/LQ；
对于（var x=VIEW.x-（VIEW.WIDTH/STAGE.WIDTH*10）；x仅当“m”不同时才绘制新线
if（lastX！==null&&lastY！==null）{
如果（lastm！==null）{
变量curm=（y-lastY）/（innerX-lastX）；
如果（curm==lastm）{
var_tmp=fPoints[fPoints.length-1]；
_tmp.x=innerX；
_tmp.y=y；
}
否则{
fPoints.push（{x:innerX，y:y}）；
}
fdPoints.push（{x:innerX，y:lastm}）；
lastm=curm；
}
否则{
lastm=（y-lastY）/（innerX-lastX）；
fPoints.push（{x:innerX，y:y}）；
}
}
否则{
fPoints.push（{x:innerX，y:y}）；
}
lastX=innerX；
lastY=y；
};
//log（“添加”+（fPoints.length-1）+“行”）；
}
函数calculateArea（回调，x）{
var s=x*视图宽度/舞台宽度/50；
var字段=0；
var m=x<0？-1:1；
对于（var i=s*m；Math.abs（i）webview.loadDataWithBaseURL("file:///android_asset/Plotter/site.html", "", "text/html", "UTF-8", "");

webview.loadUrl("file:///android_asset/Plotter/site.html");