euhmeuh/test.wast

## test.wast
(module
  (import "console" "log" (func $log (param i32) (param i32)))
  (import "game" "update" (func $update))

  (memory 1)

  (func $init (export "init") (param $width i32) (param $height i32)
    get_local $width
    get_local $height
    i32.mul
    i32.const 4
    i32.mul
    i32.const 0x10000
    i32.div_u
    grow_memory
    drop)

  (func $start (export "start")
    i32.const 0
    i32.const 12
    call $log

    i32.const 0x13
    i32.const 0xFF
    i32.store

    call $update)

  (export "memory" (memory 0))
  (data (i32.const 0) "Hello world!"))

## webassembly.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>WebAssembly</title>
        <style type="text/css">
          #screen-canvas {
            border: solid 1px black;
            display: block;
            margin-left: auto;
            margin-right: auto;
          }
        </style>
    </head>
    <body>
        <canvas id="screen-canvas" width="256" height="256">
          Please use a browser that supports canvas.
        </canvas>
        <script type="text/javascript">
            function fetchAndInstantiate(url, importObject) {
              return fetch(url).then(response =>
                response.arrayBuffer()
              ).then(bytes =>
                WebAssembly.instantiate(bytes, importObject)
              ).then(results =>
                results.instance
              );
            }
        </script>
        <script type="text/javascript">
          let canvas = document.getElementById('screen-canvas');
          if (canvas.getContext) {
            initScreen();
          }

          function initScreen() {
            let width = canvas.width;
            let height = canvas.height;
            let screenDataOffset = 16;
            let ctx = canvas.getContext('2d');
            let imageData;
            let memory;
            let importObject = {
              game: {
                update: function() {
                  ctx.putImageData(imageData, 0, 0);
                }
              },
              console: {
                log: function(offset, length) {
                  var bytes = new Uint8Array(memory.buffer, offset, length);
                  var string = new TextDecoder('utf8').decode(bytes);
                  console.log(string);
                }
              }
            };

            fetchAndInstantiate('test.wasm', importObject).then(function(instance) {
              instance.exports.init(width, height);
              memory = instance.exports.memory;
              imageData = new ImageData(new Uint8ClampedArray(memory.buffer, screenDataOffset, width*height*4), width, height)
              instance.exports.start();
            });
          }
        </script>
    </body>
</html>
	(module
	(import "console" "log" (func $log (param i32) (param i32)))
	(import "game" "update" (func $update))

	(memory 1)

	(func $init (export "init") (param $width i32) (param $height i32)
	get_local $width
	get_local $height
	i32.mul
	i32.const 4
	i32.mul
	i32.const 0x10000
	i32.div_u
	grow_memory
	drop)

	(func $start (export "start")
	i32.const 0
	i32.const 12
	call $log

	i32.const 0x13
	i32.const 0xFF
	i32.store

	call $update)

	(export "memory" (memory 0))
	(data (i32.const 0) "Hello world!"))
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>WebAssembly</title>
	<style type="text/css">
	#screen-canvas {
	border: solid 1px black;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	</style>
	</head>
	<body>
	<canvas id="screen-canvas" width="256" height="256">
	Please use a browser that supports canvas.
	</canvas>
	<script type="text/javascript">
	function fetchAndInstantiate(url, importObject) {
	return fetch(url).then(response =>
	response.arrayBuffer()
	).then(bytes =>
	WebAssembly.instantiate(bytes, importObject)
	).then(results =>
	results.instance
	);
	}
	</script>
	<script type="text/javascript">
	let canvas = document.getElementById('screen-canvas');
	if (canvas.getContext) {
	initScreen();
	}

	function initScreen() {
	let width = canvas.width;
	let height = canvas.height;
	let screenDataOffset = 16;
	let ctx = canvas.getContext('2d');
	let imageData;
	let memory;
	let importObject = {
	game: {
	update: function() {
	ctx.putImageData(imageData, 0, 0);
	}
	},
	console: {
	log: function(offset, length) {
	var bytes = new Uint8Array(memory.buffer, offset, length);
	var string = new TextDecoder('utf8').decode(bytes);
	console.log(string);
	}
	}
	};

	fetchAndInstantiate('test.wasm', importObject).then(function(instance) {
	instance.exports.init(width, height);
	memory = instance.exports.memory;
	imageData = new ImageData(new Uint8ClampedArray(memory.buffer, screenDataOffset, widthheight4), width, height)
	instance.exports.start();
	});
	}
	</script>
	</body>
	</html>