Try initializing canvas inside after DeviceReady is fired, the width and height may not be initialized before the intel.xdk.device.ready is fired.
Here is the modified code:
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); margin:0; padding:0; }
input, textarea { -webkit-user-select:text; }
html, body { background-color:red; color:black; width:100%; height:100%;}
canvas{background-color: #f00; position: relative; display:block;}
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
initCanvas();
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
function initCanvas(){
var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
</script>
</head>
<body>
<canvas id="game"></canvas>
</body>
</html>