metaist/README.markdown

## README.markdown

      
    Raw
  

              README.markdown
            
          
    Purpose

Class "Hello World" app with a bit of canvas thrown in for good measure.
References


MDN: Basic usage of Canvas
Codelab 2: Create Basic App


## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello, World!?</h1>
    <canvas id="canvas"></canvas>
    <script src="view.js"></script>
  </body>
</html>

## main.js
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    bounds: {
      width: 500,
      height: 309
    }
  });
});

## manifest.json
{
  "manifest_version": 2,
  "name": "My first app",
  "version": "1",
  "app": {
    "background": {
      "scripts": ["main.js"]
    }
  }
}

## view.js
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 55, 50);

    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
  }
}

draw();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Hello World!</title>
	</head>
	<body>
	<h1>Hello, World!?</h1>
	<canvas id="canvas"></canvas>
	<script src="view.js"></script>
	</body>
	</html>
	chrome.app.runtime.onLaunched.addListener(function() {
	chrome.app.window.create('index.html', {
	bounds: {
	width: 500,
	height: 309
	}
	});
	});
	{
	"manifest_version": 2,
	"name": "My first app",
	"version": "1",
	"app": {
	"background": {
	"scripts": ["main.js"]
	}
	}
	}
	function draw() {
	var canvas = document.getElementById('canvas');
	if (canvas.getContext) {
	var ctx = canvas.getContext("2d");

	ctx.fillStyle = "rgb(200,0,0)";
	ctx.fillRect (10, 10, 55, 50);

	ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
	ctx.fillRect (30, 30, 55, 50);
	}
	}

	draw();