android webview canvas,javascript - HTML5 Canvas Support and Android Webview - Stack Overflow

I need to draw charts in my application. For that i use RGraph ( http://www.rgraph.net/ ) ; it allows to draw interactive charts with Javascript. I put my javascript code in a HTML document in assets of application, and i call it from a fragment in a ViewPager.

Here is the HTML and javascript code :

[No canvas support]

function CreateGradient (obj, color)

{

return RGraph.RadialGradient(obj, 200, 150, 95, 200, 150, 125, color, color)

}

function isCanvasSupported(){

var test_canvas = document.createElement("canvas");

var canvascheck=(test_canvas.getContext) ? true : false ;

return canvascheck;

}

window.onload = function ()

{

if(isCanvasSupported)

DrawPieChart();

else

document.write("hheheheheh");

}

function DrawPieChart ()

{

var canvas = document.getElementById('cvs');

var ctx = canvas.getContext('2d');

var pie = new RGraph.Pie('cvs', [2,3,6,7,82]);

pie.Set('chart.colors', [

CreateGradient(pie, '#580600'),

CreateGradient(pie, '#AEAEAE'),

CreateGradient(pie, '#860100'),

CreateGradient(pie, '#C7C7C7'),

CreateGradient(pie, '#A70000')

]);

pie.Set('chart.labels.sticks', true);

pie.Set('chart.labels.sticks.length', 5);

pie.Set('chart.tooltips', ['Autres',

'Italie',

'Royaume-Uni',

'Espagne',

'France']);

pie.Set('chart.labels', ['2%','3%','6%','7%','82%']);

pie.Set('chart.radius', 150);

pie.Set('chart.shadow', true);

pie.Set('chart.shadow.offsetx', 0);

pie.Set('chart.shadow.offsety', 0);

pie.Set('chart.shadow.blur', 25);

pie.Draw();

}

and here is the code of a fragment :

@Override

public void onActivityCreated(Bundle savedInstanceState) {

mWebView = (WebView)getActivity().findViewById(R.id.group_fragment_one_webView);

mWebView.setFocusable(false);

mWebView.loadUrl("file:///android_asset/graphs/graph1.html");

mWebView.getSettings().setJavaScriptEnabled(true);

mWebView.getSettings().setDefaultZoom(ZoomDensity.FAR);

mWebView.getSettings().setDefaultFontSize(24);

mWebView.getSettings().setBuiltInZoomControls(false);

mWebView.setBackgroundColor(0);

mWebView.setHorizontalScrollBarEnabled(false);

mWebView.setVerticalScrollBarEnabled(false);

mWebView.getSettings().setSupportZoom(false);

mWebView.getSettings().setRenderPriority(RenderPriority.HIGH);

String TAG = "HTML 5";

WebSettings ws = mWebView.getSettings();

ws.setJavaScriptEnabled(true);

ws.setAllowFileAccess(true);

if (Build.VERSION.SDK_INT>=Build.VERSION_CODES.ECLAIR) {

try {

Method m1 = WebSettings.class.getMethod("setDomStorageEnabled", new Class[]{Boolean.TYPE});

m1.invoke(ws, Boolean.TRUE);

Method m2 = WebSettings.class.getMethod("setDatabaseEnabled", new Class[]{Boolean.TYPE});

m2.invoke(ws, Boolean.TRUE);

Method m3 = WebSettings.class.getMethod("setDatabasePath", new Class[]{String.class});

m3.invoke(ws, "/data/data/" + getActivity().getApplicationContext().getPackageName() + "/databases/");

Method m4 = WebSettings.class.getMethod("setAppCacheMaxSize", new Class[]{Long.TYPE});

m4.invoke(ws, 1024*1024*8);

Method m5 = WebSettings.class.getMethod("setAppCachePath", new Class[]{String.class});

m5.invoke(ws, "/data/data/" + getActivity().getApplicationContext().getPackageName() + "/cache/");

Method m6 = WebSettings.class.getMethod("setAppCacheEnabled", new Class[]{Boolean.TYPE});

m6.invoke(ws, Boolean.TRUE);

Log.d(TAG, "Enabled HTML5-Features");

}

catch (NoSuchMethodException e) {

Log.e(TAG, "Reflection fail", e);

}

catch (InvocationTargetException e) {

Log.e(TAG, "Reflection fail", e);

}

catch (IllegalAccessException e) {

Log.e(TAG, "Reflection fail", e);

}

}

mTextView1 = (TextView)getActivity().findViewById(R.id.group_fragment_one_textview1);

mTextView1.setText(getActivity().getResources().getString(R.string.group_fragment_one_text1));

Spannable spanSize = new SpannableString(mTextView1.getText());

spanSize.setSpan(new RelativeSizeSpan(2.0f),

0,

mTextView1.getText().toString().indexOf("millions"),

Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

mTextView1.setText(spanSize);

Spannable colorSpan = new SpannableString(mTextView1.getText());

colorSpan.setSpan(new ForegroundColorSpan(getActivity().getResources().getColor(R.color.red_ribbon)),

0,

mTextView1.getText().toString().indexOf("millions"),

Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

mTextView1.setText(colorSpan);

mTextView1.setTypeface(Utils.getTextFont(getActivity().getApplicationContext()));

mTextView2 = (TextView)getActivity().findViewById(R.id.group_fragment_one_textview2);

mTextView2.setText(getActivity().getResources().getString(R.string.group_fragment_one_text2));

spanSize = new SpannableString(mTextView2.getText());

spanSize.setSpan(new RelativeSizeSpan(2.0f),

0,

mTextView2.getText().toString().indexOf("du chiffre"),

Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

mTextView2.setText(spanSize);

colorSpan = new SpannableString(mTextView2.getText());

colorSpan.setSpan(new ForegroundColorSpan(getActivity().getResources().getColor(R.color.red_ribbon)),

0,

mTextView2.getText().toString().indexOf("du chiffre"),

Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

mTextView2.setText(colorSpan);

mTextView2.setTypeface(Utils.getTextFont(getActivity().getApplicationContext()));

super.onActivityCreated(savedInstanceState);

}

It works fine on the emulator and on the Eclipse browser... But when I want to see it on a smartphone i have a bug with Canvas. sometimes the chart is correctly displayed, sometimes "No canvas support" is displayed. In the ViewPager, only the fragment n, the fragment n-1 and n+1 are simultaneously instantiated. Other fragments are instantiated when the user scroll on another fragment. So each time the user scroll, a HTML is loaded. and sometimes the canvas is supported, sometimes not...

I tried to get the support of canvas in javascript, but it always returns that the canvas is supported whereas it's not true...

Any idea ?