Skip to content
RblSb edited this page Apr 13, 2018 · 14 revisions

The HTML5 target creates JavaScript based project files for IntelliJ IDEA and HaxeDevelop. For a simple project build enough to execute node Kha/make html5.

But some browsers do not allow you to open a project outside the server, so you can create a local server using khamake: node Kha/make --server.

And open http://localhost:8080 in browser (8080 is default khamake port). You can set custom port with --port 1234.

Also check specific khamake options for the HTML5 target here.

Touch Events behavior

kha.input.Surface events always return similar events for kha.input.Mouse, such as mobile browsers do, but without delay (every ontouchstart send onmousedown, etc). So if your application does not require complex multi-touch gestures, it will be enough to catch only Mouse events.

Full-page canvas

To make a dynamic resizable canvas you can use the following code before the System.init call:

import kha.System;
#if (kha_html5 && js)
import js.html.CanvasElement;
import js.Browser.document;
import js.Browser.window;
#end

class Main {
	
	static function main():Void {
		#if (kha_html5 && js)
		document.documentElement.style.padding = "0";
		document.documentElement.style.margin = "0";
		document.body.style.padding = "0";
		document.body.style.margin = "0";
		var canvas = cast(document.getElementById("khanvas"), CanvasElement);
		canvas.style.display = "block";
		
		var resize = function() {
			canvas.width = Std.int(window.innerWidth * window.devicePixelRatio);
			canvas.height = Std.int(window.innerHeight * window.devicePixelRatio);
			canvas.style.width = document.documentElement.clientWidth + "px";
			canvas.style.height = document.documentElement.clientHeight + "px";
		}
		window.onresize = resize;
		resize();
		#end
		//This window size will be valid for all other targets
		System.init({title: "Example", width: 800, height: 600}, init);
	}
	
	static function init():Void {} //Your code
}

In this case, System.windowWidth()/System.windowHeight() will always return the current size of the user's viewport.

Please note that Kha also provides a C++ based HTML5-Native backend.

Clone this wiki locally