mnem/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Simple PixiJS graphics test to see what works on mobile. Uses the
set-background-to-black hack as mentioned in issue #938.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font-family: arial;
    text-align: center;
  }
  h1 {
    font-size: 14px;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    height: 180px;
  }
  li {
    margin: 0;
    width: 150px;
    height: 180px;
    border: 1px solid black;
    display: inline-block;
  }
  canvas {
    background: #000;
  }
</style>

<script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/1.6.1/pixi.js"></script>

<ul id="container">
  <li id="canvas_container"><h1>Canvas</h1></li>
  <li id="webgl_container"><h1>WebGL</h1></li>
  <li id="auto_container"><h1>Auto-detect</h1></li>
</ul>

<script>
  function create_image(render_class, container) {
    // Set things up with the renderer we want
    var stage = new PIXI.Stage(0x000000);
    var renderer = null;
    if (render_class) {
      renderer = new render_class(128, 128);
    } else {
      renderer = PIXI.autoDetectRenderer(128, 128);
    }
    container.appendChild(renderer.view);

    // Draw a thing
    var g = new PIXI.Graphics();
    stage.addChild(g);

    g.lineStyle(3, 0xffffff, 1.0);
    g.moveTo(5, 121);
    g.lineTo(121, 5);
    g.lineStyle(0, 0x000000, 1.0);

    g.beginFill(0xFF8F24, 1.0);
    g.drawRect(10, 10, 44, 44);
    g.endFill();

    g.beginFill(0x28BAFF, 1.0);
    g.drawEllipse(94, 94, 24, 24);
    g.endFill();

    renderer.render(stage);
  }

  var canvas_container = document.getElementById("canvas_container");
  create_image(PIXI.CanvasRenderer, canvas_container);

  var webgl_container = document.getElementById("webgl_container");
  create_image(PIXI.WebGLRenderer, webgl_container);

  var auto_container = document.getElementById("auto_container");
  create_image(null, auto_container);
</script>


## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	font-family: arial;
	text-align: center;
	}
	h1 {
	font-size: 14px;
	}
	ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	height: 180px;
	}
	li {
	margin: 0;
	width: 150px;
	height: 180px;
	border: 1px solid black;
	display: inline-block;
	}
	canvas {
	background: #000;
	}
	</style>

	<script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/1.6.1/pixi.js"></script>

	<ul id="container">
	<li id="canvas_container"><h1>Canvas</h1></li>
	<li id="webgl_container"><h1>WebGL</h1></li>
	<li id="auto_container"><h1>Auto-detect</h1></li>
	</ul>

	<script>
	function create_image(render_class, container) {
	// Set things up with the renderer we want
	var stage = new PIXI.Stage(0x000000);
	var renderer = null;
	if (render_class) {
	renderer = new render_class(128, 128);
	} else {
	renderer = PIXI.autoDetectRenderer(128, 128);
	}
	container.appendChild(renderer.view);

	// Draw a thing
	var g = new PIXI.Graphics();
	stage.addChild(g);

	g.lineStyle(3, 0xffffff, 1.0);
	g.moveTo(5, 121);
	g.lineTo(121, 5);
	g.lineStyle(0, 0x000000, 1.0);

	g.beginFill(0xFF8F24, 1.0);
	g.drawRect(10, 10, 44, 44);
	g.endFill();

	g.beginFill(0x28BAFF, 1.0);
	g.drawEllipse(94, 94, 24, 24);
	g.endFill();

	renderer.render(stage);
	}

	var canvas_container = document.getElementById("canvas_container");
	create_image(PIXI.CanvasRenderer, canvas_container);

	var webgl_container = document.getElementById("webgl_container");
	create_image(PIXI.WebGLRenderer, webgl_container);

	var auto_container = document.getElementById("auto_container");
	create_image(null, auto_container);
	</script>