studioijeoma/WebGL_Canvas_Texture_Text_Example.html

## WebGL_Canvas_Texture_Text_Example.html
<!doctype html>
<html>
	<head>
		<title>Three.js : WebGL Canvas Texture Text Example</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body {
				overflow: hidden;
			}
		</style>
		<script type="text/javascript" src="js/Three.js"></script>
		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
		<script type="text/javascript" src="js/Stats.js"></script>
		<script type="text/javascript">
			// based on https://github.com/mrdoob/three.js/issues/229
			window.onload = function() {
				var container, stats;

				var camera, scene, renderer;

				var mesh;

				init();
				animate();

				function init() {
					container = document.createElement('div');
					document.body.appendChild(container);
					camera = new THREE.Camera(75, window.innerWidth / window.innerHeight, 1, 1000);
					camera.position.z = 1000;
					scene = new THREE.Scene();
					renderer = new THREE.WebGLRenderer({
						antialias : true
					});
					renderer.setSize(window.innerWidth, window.innerHeight);

					container.appendChild(renderer.domElement);
					stats = new Stats();
					stats.domElement.style.position = 'absolute';
					stats.domElement.style.top = '0px';
					container.appendChild(stats.domElement);

					var x = window.innerWidth / 2 - 300;
					var y = window.innerHeight / 2 - 300;
					mesh = createLabel("HELLO WORLD", x, y, 0, 100, "black", "yellow");

					scene.addObject(mesh);
				}

				function createLabel(text, x, y, z, size, color, backGroundColor, backgroundMargin) {
					if(!backgroundMargin)
						backgroundMargin = 50;

					var canvas = document.createElement("canvas");

					var context = canvas.getContext("2d");
					context.font = size + "pt Arial";

					var textWidth = context.measureText(text).width;

					canvas.width = textWidth + backgroundMargin;
					canvas.height = size + backgroundMargin;
					context = canvas.getContext("2d");
					context.font = size + "pt Arial";

					if(backGroundColor) {
						context.fillStyle = backGroundColor;
						context.fillRect(canvas.width / 2 - textWidth / 2 - backgroundMargin / 2, canvas.height / 2 - size / 2 - +backgroundMargin / 2, textWidth + backgroundMargin, size + backgroundMargin);
					}

					context.textAlign = "center";
					context.textBaseline = "middle";
					context.fillStyle = color;
					context.fillText(text, canvas.width / 2, canvas.height / 2);

					// context.strokeStyle = "black";
					// context.strokeRect(0, 0, canvas.width, canvas.height);

					var texture = new THREE.Texture(canvas);
					texture.needsUpdate = true;

					var material = new THREE.MeshBasicMaterial({
						map : texture
					});

					var mesh = new THREE.Mesh(new THREE.PlaneGeometry(canvas.width, canvas.height), material);
					// mesh.overdraw = true;
					mesh.doubleSided = true;
					mesh.position.x = x - canvas.width;
					mesh.position.y = y - canvas.height;
					mesh.position.z = z;

					return mesh;
				}

				function animate() {
					requestAnimationFrame(animate);

					renderer.render(scene, camera);
					stats.update();
				}

			};

		</script>
	</head>
	<body></body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Three.js : WebGL Canvas Texture Text Example</title>
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	}
	body {
	overflow: hidden;
	}
	</style>
	<script type="text/javascript" src="js/Three.js"></script>
	<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
	<script type="text/javascript" src="js/Stats.js"></script>
	<script type="text/javascript">
	// based on https://github.com/mrdoob/three.js/issues/229
	window.onload = function() {
	var container, stats;

	var camera, scene, renderer;

	var mesh;

	init();
	animate();

	function init() {
	container = document.createElement('div');
	document.body.appendChild(container);
	camera = new THREE.Camera(75, window.innerWidth / window.innerHeight, 1, 1000);
	camera.position.z = 1000;
	scene = new THREE.Scene();
	renderer = new THREE.WebGLRenderer({
	antialias : true
	});
	renderer.setSize(window.innerWidth, window.innerHeight);

	container.appendChild(renderer.domElement);
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';
	container.appendChild(stats.domElement);

	var x = window.innerWidth / 2 - 300;
	var y = window.innerHeight / 2 - 300;
	mesh = createLabel("HELLO WORLD", x, y, 0, 100, "black", "yellow");

	scene.addObject(mesh);
	}

	function createLabel(text, x, y, z, size, color, backGroundColor, backgroundMargin) {
	if(!backgroundMargin)
	backgroundMargin = 50;

	var canvas = document.createElement("canvas");

	var context = canvas.getContext("2d");
	context.font = size + "pt Arial";

	var textWidth = context.measureText(text).width;

	canvas.width = textWidth + backgroundMargin;
	canvas.height = size + backgroundMargin;
	context = canvas.getContext("2d");
	context.font = size + "pt Arial";

	if(backGroundColor) {
	context.fillStyle = backGroundColor;
	context.fillRect(canvas.width / 2 - textWidth / 2 - backgroundMargin / 2, canvas.height / 2 - size / 2 - +backgroundMargin / 2, textWidth + backgroundMargin, size + backgroundMargin);
	}

	context.textAlign = "center";
	context.textBaseline = "middle";
	context.fillStyle = color;
	context.fillText(text, canvas.width / 2, canvas.height / 2);

	// context.strokeStyle = "black";
	// context.strokeRect(0, 0, canvas.width, canvas.height);

	var texture = new THREE.Texture(canvas);
	texture.needsUpdate = true;

	var material = new THREE.MeshBasicMaterial({
	map : texture
	});

	var mesh = new THREE.Mesh(new THREE.PlaneGeometry(canvas.width, canvas.height), material);
	// mesh.overdraw = true;
	mesh.doubleSided = true;
	mesh.position.x = x - canvas.width;
	mesh.position.y = y - canvas.height;
	mesh.position.z = z;

	return mesh;
	}

	function animate() {
	requestAnimationFrame(animate);

	renderer.render(scene, camera);
	stats.update();
	}

	};

	</script>
	</head>
	<body></body>
	</html>