-
Notifications
You must be signed in to change notification settings - Fork 230
/
Copy pathwebgl-same-code-container-embedded.html
48 lines (46 loc) · 2.78 KB
/
webgl-same-code-container-embedded.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>WebGL2 - Same Code - Container Embedded</title>
<style>
body {
font-family: Georiga;
font-size: x-large;
line-spacing: 1.5em;
text-align: justify;
}
#article {
margin: auto;
width: 600px;
}
/* all canvas elements */
canvas {
width: 100%;
height: 100%;
}
/* the container */
#canvas {
margin: 1em 0em 1em 1em;
border: 5px solid black;
float: right;
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div id="article">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum euismod nisi ut fermentum egestas. Curabitur felis sem, malesuada vitae lobortis quis, lacinia vel est. Vestibulum felis nunc, mollis imperdiet lectus eget, pellentesque cursus eros. Vivamus vel metus tortor. Proin ut lectus felis. <span id="canvas"></span> Vestibulum rhoncus sem et metus adipiscing aliquam. Ut id vehicula lorem. Quisque fermentum lobortis lacus, lacinia venenatis tellus pretium sed. Integer tincidunt eros interdum magna pretium molestie. Praesent interdum molestie tristique. Vestibulum blandit, mi viverra facilisis mollis, leo ipsum eleifend justo, id pulvinar metus mi in tortor. Pellentesque at eros dignissim, aliquet metus at, ultrices sapien. Maecenas ut risus auctor, rutrum orci at, pretium metus. Ut quis tempor diam. Proin cursus, neque sit amet euismod aliquam, lacus mi porttitor sapien, aliquam tincidunt tortor tellus eu dui. Suspendisse potenti.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum euismod nisi ut fermentum egestas. Curabitur felis sem, malesuada vitae lobortis quis, lacinia vel est. Vestibulum felis nunc, mollis imperdiet lectus eget, pellentesque cursus eros. Vivamus vel metus tortor. Proin ut lectus felis. Vestibulum rhoncus sem et metus adipiscing aliquam. Ut id vehicula lorem. Quisque fermentum lobortis lacus, lacinia venenatis tellus pretium sed. Integer tincidunt eros interdum magna pretium molestie. Praesent interdum molestie tristique. Vestibulum blandit, mi viverra facilisis mollis, leo ipsum eleifend justo, id pulvinar metus mi in tortor. Pellentesque at eros dignissim, aliquet metus at, ultrices sapien. Maecenas ut risus auctor, rutrum orci at, pretium metus. Ut quis tempor diam. Proin cursus, neque sit amet euismod aliquam, lacus mi porttitor sapien, aliquam tincidunt tortor tellus eu dui. Suspendisse potenti.</p>
</div>
</body>
<script src="resources/webgl-utils.js"></script>
<script src="resources/webgl-lessons-helper.js"></script>
<script src="resources/3d-math.js"></script>
<script src="resources/primitives.js"></script>
<script src="resources/same-code.js"></script>
</html>