0

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.

Kara
  • 6,115
  • 16
  • 50
  • 57
Jaka
  • 1,353
  • 2
  • 10
  • 16
  • Try to make the graph position fixed, via style tag, into the canvas html code –  Oct 03 '13 at 19:59
  • that worked. it messed some other things, but the graph works. thanks! – Jaka Oct 03 '13 at 20:08
  • now a new problem appeared, i posted it under http://stackoverflow.com/questions/19847582/chart-js-canvas-resize – Jaka Nov 09 '13 at 08:05

3 Answers3

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.

san.win
  • 11
  • 1
  • Actually I solved a similar problem by setting `overflow: hidden;` to the canvas's parent element. – swen Sep 22 '16 at 13:03
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);

}
Don Cruickshank
  • 5,641
  • 6
  • 48
  • 48
Chitresh goyal
  • 313
  • 1
  • 7
0

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

Felix Gerber
  • 1,615
  • 3
  • 30
  • 40
warlock
  • 1