So how hard is it to draw on a html5 canvas? Well if you ever lived in a GDI+ world like I once did, then it’s pretty simple. In fact it’s somewhat familiar to silverlight/wpf people too, the parameters passed to draw a rectangle for example are , left, top, width, height. (GDI/Windows API people would me more familiar to using left,top,right,bottom (the RECT struct). Nonetheless, IMO drawing with the html5 canvas couldn’t be easier.
Here’s the code
1: @{
2: ViewBag.Title = "Home Page";
3: }
4: <h2>@ViewBag.Message</h2>
5:
6: <canvas id="canvas" width="300" height="300">
7: Canvas not supported
8: </canvas>
9:
10:
11: @section Scripts
12: {
13:
14:
15: <script type="application/javascript">
16:
17: $(function() {
18: draw();
19: });
20: </script>
21:
22: <script type="application/javascript">
23: function draw() {
24: if (Modernizr.canvas ) {
25: var canvas = document.getElementById("canvas");
26: var ctx = canvas.getContext("2d");
27:
28: ctx.fillStyle = "rgb(200,0,0)";
29: ctx.fillRect(10, 10, 100, 1000);
30: }
31: }
32: </script>
33: }
That’s all you need to get started, there are some nice libraries starting to emerge that use html5 canvas (graphing etc)