Wednesday, February 1, 2012

HTML5 Canvas + Javascript - interactive user input and convas's element

Using JavaScript update HTML5 canvas Text
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
var canvas;
var context;

function loadcanvas(){

canvas = document.getElementById("mycanvas");
context = canvas.getContext("2d");

}

function enter() {
var userenter = document.getElementById("textin").value;
context.fillText(userenter, 50, 50);
}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas - Using JavaScript update canvas Text</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="400" height="100">
Sorry! Your browser doesn't support Canvas.
</canvas>
<form>
<input id="textin" type="text" />
<input type="button" value="Enter" onClick="enter()" />
</form>
</body>
</html>


No comments:

Post a Comment