Introduction

Canvas+ is a webview engine that allows you to execute your JavaScript HTML5 applications on mobile devices. It not only accelerates the performance of the game but also allows you to access native device features. Although it runs plain JavaScript, there is no support for the entire HTML5 API.

Canvas+ is perfectly tuned for games and it tries to provide the best acceleration technology using the minimum set of HTML5 functionalities needed. Although these functionalities should be enough to run a game, there are some situations where accessing a full DOM environment could be very useful for developers. In these situations is where a Webview+ or a System Webview will be more suitable than Canvas+.

Advantages

  • High performance: It is the fastest webview engine.
  • Light weight: Only 5MB of space.
  • Compatibility with old OS versions.
  • Portability: Android, iOS, Wearables…
  • Specially thought and designed for Gaming.
  • Ultra-fast bindings: box2d, gamepad…

Disadvantages

  • DOM access is restricted.
  • It is not a full browser.
  • Less suitable for apps than the other webview engines.

When to use it

  • If you are developing canvas based game that requires mainly high performance and high FPS rate.
  • If your game does not require DOM UI elements and you want it to be easily portable to other OS versions and light.
  • If you are using a canvas based game engine, such as Phaser, Pixi, PlayCanvas, Kiwi.js …

Supported features

  • Canvas
  • WebGL
  • Audio
  • Websockets
  • XHR
  • Localstorage (with no limit)
  • Extend it using Plugins for Cordova
  • Cocoon plugins

Unsupported features

  • CSS and DOM UI elements
  • WebAudio
  • DOMParser class
  • WebRTC
  • WebWorkers

Canvas+ special features

Debugging

You can debug your applications running in Canvas+ following these steps:

  • Install a DevApp in your test device. You can install it from the official stores (Android, iOS), but it’s recommended to compile one in Cocoon.io and use it.
  • Once you have the DevApp installed just load a zip file with the sources of your app into it and launch them with Canvas+.
  • From here you can access the log that your app is generating.Error_CocoonIO_minify-225x300

Canvas+ API

Cocoon Canvas+ are multiplatform Javascript utilities that work in Canvas+. These plugins are included in Canvas+ core, so it is not required to install anything else at the cloud. The required files, if so, will be injected automatically in your project.

Unlike old CocoonJS plugins, Cocoon Canvas+ plugins need to wait for Cordova deviceready event to start working. This event fires when Cordova is fully loaded.

Others

  • It is possible to use plugins inside Canvas+ as long as they are supported by Cordova 5.0.
  • It does not require the whitelist plugin added by default in the config.xml generation.

Additional notes about Canvas+

Canvas+ is not a full browser, but a highly optimized JavaScript Virtual Machine for Canvas 2D and WebGL environments. Comparing it to a full fetched browser is not recommended as browsers include “a lot of magic tricks” (and that is why sometimes they are big and slow). For example, a browser might be able to handle a 5000 by 5000 pixels image but that does not mean that the underlying device is able to do it, just that the browser is handling some things internally for you either lowering the quality of the image (downscaling it) or subdividing it. Very few native technologies (C++ game engines) allow this kind of features as the developers should know how to handle this situations correctly (do not use 5000×5000 textures in the first place). Here at Ludei we never intended to create a new browser, but provide a highly specialized runtime environment so HTML5 developers can be closer to the native side without ever leaving JavaScript and the great HTML5 APIs.

Changelog

Version 2.3.7 – 01/13/2017

  • [iOS] Enqueue data received in XHR to avoid data being lost while the app is in background (avoid black textures when back)
  • [Android] Avoid delivering OpenGL events while the OpenGL context is inactive (avoid black textures when back)
  • Fixed issue with sound not being paused when the top and bottom notifications bars are opened
  • Playcanvas issue with some WebGL properties not being available in the JS engine.

Version 2.3.6 – 12/02/2016

  • [iOS] Fixed audio routing issue when headphones are connected/disconnected.
  • [iOS] Fixed TinyXML crash when checkNode exception is not caught
  • [iOS] Keyboard was not hiding when using Cocoon.Dialog.dismissKeyboard();

Version 2.3.5 – 11/09/2016

  • [iOS] Fixed pause/resume audio when an income call is rejected
  • [iOS] Pause/resume CocoonJSView music when system music player is started/stopped.