The document discusses using the canvas element in Windows Store apps. It covers canvas capabilities like rendering 2D objects and bitmaps. It provides code examples for drawing lines, circles, text, and images on a canvas using the WinJS library. It also introduces capturing ink data using the Windows.UI.Input.Inking namespace, which allows saving handwriting, recognizing characters, and converting ink to text. The document ends with a question and answer session.

1. Canvas in action in
Windows Store Apps
By
Nir mal Hot a

2. Nirmal Hota
http://twitter.com/nirmalhota
http://www.facebook.com/nirmal.hota.14
http://in.linkedin.com/in/nirmalhota
Blogs
http://mindfiremobile.wordpress.com
http://nirmalhota.blogspot.in/

3. Canvas in action in Windows Store Apps
Canvas capabilities
Canvas in action with WinJS
Ink data capture
Demo

4. Canvas Capabilities
Runtime script rendering
Renders 2D objects/Shapes
Renders bitmaps

5. Canvas in action with WinJS
Drawing line object
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.moveTo(0,0);
context.lineTo(200,100);
context.stroke();

6. Canvas in action with WinJS
Drawing circle object
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
context.arc(90,50, 20,0,2*Math.PI);
context.stroke();
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
context.arc(90,50, 20,0,2*Math.PI);
context.fill();

7. Canvas in action with WinJS
Drawing text object
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.font="30px Arial";
context.strokeText("Mindfire",10,50);
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.font="30px Arial";
context.fillText("Mindfire",10,50);

8. Canvas in action with WinJS
Drawing Image object
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
var img=document.getElementById("myImage");
context.drawImage(img,0,0);

9. Canvas in action with WinJS

10. Ink data capture : Small Intro
Uses Windows.UI.Input.Inking
Saves hand writing data
Recognizes the characters
Converts ink to text
Select-Copy-Paste flexibility
Changes writing the Ink color

11. Ink data capture : Small Intro

12. Questions & Answer Session

13. Certainly this seminar is just a small step
towards a big concept.
Let's keep exploring and we may come up
with more seminars in more details