Skip to content

Instantly share code, notes, and snippets.

@pixelpicosean

pixelpicosean/single-canvas.html

Last active August 29, 2015 13:59
Show Gist options
  • Save pixelpicosean/10691899 to your computer and use it in GitHub Desktop.
Save pixelpicosean/10691899 to your computer and use it in GitHub Desktop.
Download ZIP
Single canvas HTML page(Mobile device capable)
Raw
single-canvas.html
<!doctype html>
<html>
<head>
<title>WebGL 2D Rendering</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style>
html, body {
background-color: #333;
color: #aaa;
font-family: helvetica, arial, sans-serif;
margin: 0;
padding: 0;
font-size: 10pt;
}
#canvas {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*
image-rendering: crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}
</style>
<script src="utils.js"></script>
<script defer src="app.js"></script>
</head>
<body>
<canvas id="canvas" width="480" height="320" moz-opaque>
Your browser does not support canvas!
</canvas>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0, 1);
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
gl_FragColor = vec4(0, 1, 0, 1);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment