HTML and CSS Reference
In-Depth Information
url: '/home/SaveCanvas',
data: data,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (result) {
error: function (err) {
alert(err.status + “ - “ + err.statusText);
This jQuery code first checks whether the browser supports the HTML5 canvas using the Modernizr
library. It then wires click event handlers for Button1 (Draw) and Button2 (Save). Notice the bold code. The
first fragment essentially gets hold of the Canvas object and its drawing context. Several properties of the
drawing context are then set, such as fillStyle and font . The fillRect() method draws the canvas
background. The fillText() method draws the supplied text at a specified x and y location. The string to be
drawn is taken from the TextBox , and the text alignment is set to center.
The click event handler for Button2 uses $.ajax() and sends a POST request to the SaveCanvas() action
method. The message returned from SaveCanvas() is then shown to the user.
Figure 1-30 shows a sample run of the Index view.
Figure 1-30. Sample run of the Index view
HTML5 is more than a set of markup elements. It offers many programmable features that are often
required in modern web applications. These features include native support for playing audio and video
Search WWH ::

Custom Search