function createMobileCanvasApp() { var CANVAS_ID = 'application-canvas'; var canvas, devices, app; var createCanvas = function () { canvas = document.createElement('canvas'); canvas.setAttribute('id', CANVAS_ID); canvas.setAttribute('tabindex', 0); canvas.setAttribute('class', 'canvasBox'); // canvas.style.visibility = 'hidden'; // Disable I-bar cursor on click+drag canvas.onselectstart = function () { return false; }; document.getElementById("play").appendChild(canvas); return canvas; }; var createInputDevices = function (canvas) { var devices = { elementInput: new pc.ElementInput(canvas, { useMouse: MOBILE_INPUT_SETTINGS.useMouse, useTouch: MOBILE_INPUT_SETTINGS.useTouch }), keyboard: MOBILE_INPUT_SETTINGS.useKeyboard ? new pc.Keyboard(window) : null, mouse: MOBILE_INPUT_SETTINGS.useMouse ? new pc.Mouse(canvas) : null, gamepads: MOBILE_INPUT_SETTINGS.useGamepads ? new pc.GamePads() : null, touch: MOBILE_INPUT_SETTINGS.useTouch && pc.platform.touch ? new pc.TouchDevice(canvas) : null }; return devices; }; var configureCss = function (fillMode, width, height) { // Configure resolution and resize event if (canvas.classList) { canvas.classList.add('fill-mode-' + fillMode); } // css media query for aspect ratio changes var css = "@media screen and (min-aspect-ratio: " + width + "/" + height + ") {"; css += " #application-canvas.fill-mode-KEEP_ASPECT {"; css += " width: auto;"; css += " height: 100%;"; css += " margin: 0 auto;"; css += " }"; css += "}"; // append css to style if (document.head.querySelector) { document.head.querySelector('style').innerHTML += css; } }; var reflow = function () { app.resizeCanvas(); console.log(app.resizeCanvas()); }; var displayError = function (html) { var div = document.createElement('div'); div.innerHTML = [ '
',
' ',
' ',
' ' + html + ' ',
' | ',
'