Android WebView HTML5 canvas error

Question

I have an Android application which uses WebView to load the GUI using HTML. There is a <canvas> element into which i draw charts using Chart.js Javascript library for plotting charts. It was tested on 3 devices. On two of them it works fine (Android 2.2 and 2.6), but on a later vesion of android (4.1.2) the canvas makes it double: all the charts are visible twice in the canvas, one of them is shifted a bit up and to the left.

canvas with double chart

What is the problem with the canvas? Why does it double the things rendered? How can i made it render only once?

Here's the code:

HTML:

<canvas id="graph_canvas"></canvas>

JavaScript:

var canvas=document.getElementById("graph_canvas");
canvas.height=200;
canvas.width=200;
var graphSelection=document.getElementById("graphSelection");
var ctx = canvas.getContext("2d");
var data_=JSON.parse(JI.getGraphData(graphSelection.value));    
var myNewChart = new Chart(ctx).Line(data_);

Where graphSelection is a <select> element with which we select the chart, JI.getGraphData returns JSON data for Chart.js.

Try to make the graph position fixed, via style tag, into the canvas html code — user2355660
– user2355660, Commented Oct 3, 2013 at 19:59
that worked. it messed some other things, but the graph works. thanks! — Jaka
– Jaka, Commented Oct 3, 2013 at 20:08
now a new problem appeared, i posted it under stackoverflow.com/questions/19847582/chart-js-canvas-resize — Jaka
– Jaka, Commented Nov 9, 2013 at 8:05

san.win · Accepted Answer · 2014-01-11 21:56:26Z

1

If you do not want problems caused by "position: fixed;" on element, canvas parent element should not have css property "overflow" with value "hidden".

So define something like "overflow: visible;" on parent element.

answered Jan 11, 2014 at 21:56

san.win

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

swen Over a year ago

Actually I solved a similar problem by setting overflow: hidden; to the canvas's parent element.

Don Cruickshank · Accepted Answer · 2014-01-30 10:32:59Z

0

Try this:

// If Samsung android browser is detected
if (window.navigator && window.navigator.userAgent.indexOf('534.30') > 0) {

    // Tweak the canvas opacity, causing it to redraw
    $('canvas').css('opacity', '0.99');

    // Set the canvas opacity back to normal after 5ms
    setTimeout(function() {
        $('canvas').css('opacity', '1');
    }, 5);

}

edited Jan 30, 2014 at 10:32

Don Cruickshank

6,0186 gold badges53 silver badges50 bronze badges

answered Jan 30, 2014 at 10:13

Chitresh goyal

3332 silver badges7 bronze badges

Comments

Felix Gerber · Accepted Answer · 2016-04-11 07:55:09Z

0

I met this problem too. I solved it by using position:relative , left and -webkit-transform instead margin;. The problem was solved accidentally.

edited Apr 11, 2016 at 7:55

Felix Gerber

1,6474 gold badges32 silver badges40 bronze badges

answered Apr 11, 2016 at 7:13

warlock

1

Collectives™ on Stack Overflow

Android WebView HTML5 canvas error

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related