HTML5 + Cordova (Android Problem)

Joe_M_ · ‎12-14-2016

Hello im start to try a simple application.

I have a problem whit canvas.

When i Debug the application on the Editor work fine,
after compiled APK i see all empty

Who are my problem?

this is my main html

<!DOCTYPE html>
<html>
<!--
  * Please see the included README.md file for license terms and conditions.
  -->
<head>
    <title>Blank Cordova Mobile App Project Template (Lite)</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <!-- see http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <style>
        /* following two viewport lines are equivalent to meta viewport statement above, needed for Windows */
        /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html and http://dev.w3.org/csswg/css-device-adapt/ */
        @-ms-viewport { width: 100vw ; min-zoom: 110% ; zoom: 110% ;background: #6495ED;  }  @viewport { width: 100vw ; min-zoom: 110% zoom: 110% ; }
        @-ms-viewport { user-zoom: fixed ; min-zoom: 110% ; }           @viewport { user-zoom: fixed ; min-zoom: 110% ; background: #6495ED; }
        canvas { background:#6495ED; display: block; height: 100vh; width: 100vw; top:0;left:0; }
        body { 
       margin: 0; 
       padding: 0;
    
     }
    </style>

    <script src="cordova.js"></script>          <!-- phantom library, needed for Cordova api calls, added during build -->
    <script src="js/app.js"></script>           <!-- recommended location of your JavaScript code relative to other JS files -->
    <script src="xdk/init-dev.js"></script>     <!-- normalizes device and document ready events, see README for details -->
    
        <!-- Librerie -->
<script src="Core\render.js"></script>
<script src="Core\vector.js"></script>
<script src="Core\input.js"></script>
<script src="Core\Camera.js"></script>
<script src="Core\GUI.js"></script>
    
</head>

<body>

    <div id="Viewport" style="width:640; height: 480; overflow:hidden;">
<canvas id="canvas" width="800" height="600">
       </canvas></div>

</body>
</html>


<script>

//Costruttori
var canvas = document.getElementById('canvas');
canvas.style.background = '#6495ED';
var ctx = canvas.getContext('2d');

var viewport = document.getElementById("Viewport");

//Classi
var actor = new Actor(); //Actor Class
var vec2 = new Vector2(); //Vector Class
var keyboard = new Keyboard();
var mouse = new Mouse();
var camera = new Camera();
var gui = new GUI();
  
//Font
ctx.font="20px Georgia";

    
//test
var layer1 = new Image();
var layer2 = new Image();


//Eventi
//window.addEventListener("keydown", KeyDown, true);
window.addEventListener("keydown",keyboard.Update,true);
//canvas.addEventListener("click",keyboard.Update,true);
    

Initialize();

    var t = 0;
function down()
    {
       // alert("bt");
        t++;
    }
    
    function up()
    {
        t++;    
    }
    
function Initialize()
{
  
    layer1.src = "data\\Test\\l1.png";
    layer2.src = "data\\Test\\l2.png";
    
    camera.Initialize(0,0,800,600);
    camera.Layer1 = layer1;
    camera.Layer2 = layer2;
    
    actor.LoadImage("data\\Charaset\\chara.png");
    actor.position = new Vector2();
    actor.position.Vector2(640/2,480/2);
    

    //ui.bt_down.src = "data\\System\\bt_down.png";
    gui.Initialize();
    
    
  
}

    
canvas.onmousedown = function(e)
{
    mouse.Down(e);
}

canvas.onmouseup = function(e)
{
    mouse.Up(e);
}
    
//Ciclo Rendering
Loop();



//Funzione loop
function Loop()
{
    Update();
    Render();
    window.setTimeout(Loop, 33);   
}

function Update()
{
  actor.Update();
  mouse.Update(); 
    
    
}
    

//Gestore Tastiera
function KeyDown(e)
{
   
    if(e.keyCode == 37) { actor.MoveLeft(); }
    if(e.keyCode == 38) { actor.MoveUp(); }
    if(e.keyCode == 39) { actor.MoveRight();}
    if(e.keyCode == 40) { actor.MoveDown();}
 
   
}
    
//Rendering GLobale
function Render()
{
    ctx.clearRect(0, 0, 800, 600);
   camera.Render(ctx,viewport);
   // gui.Render(ctx);
   
    
    
  
    ctx.fillText(camera.ViewportWidth,10,70);
    ctx.fillText(mouse.down,10,30);
    ctx.fillText("Mouse: " + mouse.loc_x + "," + mouse.loc_y,10,100);
}
</script>