Canvas in action in Windows Store Apps

By

Nirmal Hota

Nirmal Hota

http://www.facebook.com/nirmal.hota.14

http://twitter.com/nirmalhota

http://in.linkedin.com/in/nirmalhota

http://mindfiremobile.wordpress.com

http://nirmalhota.blogspot.in/

Blogs

Canvas in action in Windows Store Apps

Canvas capabilities

Canvas in action with WinJS

Ink data capture

Demo

Canvas Capabilities

Runtime script rendering

Renders 2D objects/Shapes

Renders bitmaps

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

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

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

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

Canvas in action with WinJS

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

Ink data capture : Small Intro

Questions & Answer Session

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