HTML and CSS Reference
In-Depth Information
<meta name=”viewport” content=”width=device-width” />
<title>Index</title>
<script type=”text/javascript” src=”../../Scripts/jquery-1.6.2.min.js”></script>
<script type=”text/javascript” src=”../../Scripts/modernizr-2.0.6-development-only.js”></
script>
</head>
<body>
<span>Enter Text : </span>
<input type=”text” id=”Text1” value=”<%= Session[“canvas_data”] %>” />
<input type=”button” id=”Button1” value=”Draw” />
<input type=”button” id=”Button2” value=”Save” />
<br />
<br />
<canvas id=”myCanvas” width=”500” height=”200”></canvas>
</body>
</html>
There are a couple of things to notice about this markup. First, it uses the HTML5
<canvas>
tag and
defines a canvas 500 pixels wide and 200 pixels high. Second, it uses the session variable
canvas_data
to
populate the
TextBox
so the
TextBox
contains the value of
canvas_data
.
Writing jQuery Code to Call Action Methods
Now you need to wire event handlers for the Draw and Save buttons. You do that using jQuery code, as
shown in Listing 1-10.
Listing 1-10.
jQuery Code to Draw on the Canvas and Save the Session Data
<script type=”text/javascript”>
$(document).ready(function () {
if (!Modernizr.canvas) {
alert('Your browser does not support the HTML5 canvas tag.');
}
$(“#Button1”).click(function () {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext(“2d”);
context.fillStyle = 'silver';
context.fillRect(0, 0, 500, 200);
context.fillStyle = 'Black';
context.lineWidth = 10;
context.font = '20pt Arial';
var x = canvas.width / 2;
var y = canvas.height / 2;
context.textAlign = “center”;
context.fillText($(“#Text1”).val(), x, y);
});
$(“#Button2”).click(function () {
var data = '{ “data” : “' + $(“#Text1”).val() + '”}';
$.ajax({
type: “POST”,
