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);
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