Class "Hello World" app with a bit of canvas thrown in for good measure.
- MDN: Basic usage of Canvas
- Codelab 2: Create Basic App
Class "Hello World" app with a bit of canvas thrown in for good measure.
| <!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(); |