I have an problem with my PhoneGap Application with the Hardware Acceleration from two Canvas Objects.
I need two Canvas Object to compare two different Images. On my Desktop / Handy Devices (Browser) everything is fine and the comparison works.
But when i run my compiled Android File i get an strange behaviour. When i select my first image this will be loaded in my first canvas and then when i select my second my first will be override in both canvas and only the second context from my canvas is used.
I found this Thread that the Hardware Accelartion is the Mayor Problem.
Phone Android HTML5 Hardware Acceleration - Canvas
I also use for the canvas EaselJS and when i test the following code on an Android Device
<!DOCTYPE html>
<html>
<head>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage("canvas1");
var stage2 = new createjs.Stage("canvas2");
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
stage.update();
var circle2 = new createjs.Shape();
circle2.graphics.beginFill("blue").drawCircle(0, 0, 50);
circle2.x = 100;
circle2.y = 100;
stage2.addChild(circle);
stage2.update();
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas1" width="500" height="300">
alternate content
</canvas>
<canvas id="canvas2" width="500" height="300">
alternate content
</canvas>
</body>
</html>
I got the same Problem when the Hardware Acceleration is activated, i got then two Circles with an Blue Color not one with red and the other blue.
I there any kind of way to activate the Hardware Accelartion and the canvas draws or is that an PhoneGap or Android Problem with PhoneGap?
