HTML and CSS Reference
In-Depth Information
url: '/home/SaveCanvas',
data: data,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (result) {
alert(result);
},
error: function (err) {
alert(err.status + “ - “ + err.statusText);
}
})
});
});
</script>
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
Summary
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
