-
Notifications
You must be signed in to change notification settings - Fork 682
/
Copy pathwebgl-same-code-canvas-embedded-border-box.html
52 lines (50 loc) · 3.05 KB
/
webgl-same-code-canvas-embedded-border-box.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
47
48
49
50
<!-- 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>WebGL - Same Code - Canvas Embedded</title>
<style>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
font-family: Georiga;
font-size: x-large;
line-spacing: 1.5em;
text-align: justify;
}
#article {
margin: auto;
width: 600px;
}
#canvas {
margin: 1em 1em 1em 0em;
border: 15px solid black;
float: left;
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. <canvas id="canvas"></canvas> 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>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="resources/webgl-utils.js"></script>
<script src="resources/m4.js"></script>
<script src="resources/primitives.js"></script>
<script src="resources/same-code.js"></script>
</html>