Canvas in action in
Windows Store Apps
By
Nir mal Hot a
Nirmal Hota
http://twitter.com/nirmalhota
http://www.facebook.com/nirmal.hota.14
http://in.linkedin.com/in/nirmalhota
Blog...
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.getCont...
Canvas in action with WinJS
Drawing circle object
var canvas=document.getElementById("myCanvas");
var context=canvas.getCo...
Canvas in action with WinJS
Drawing text object
var canvas=document.getElementById("myCanvas");
var context=canvas.getCont...
Canvas in action with WinJS
Drawing Image object
var canvas=document.getElementById("myCanvas");
var context=canvas.getCon...
Canvas in action with WinJS
Ink data capture : Small Intro

Uses Windows.UI.Input.Inking
Saves hand writing data
Recognizes the characters
Converts in...
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 semin...
Canvas In Action in Windows Store App
Upcoming SlideShare
Loading in...5
×

Canvas In Action in Windows Store App

833

Published on

All about - Canvas in action in Windows Store Apps.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
833
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Canvas In Action in Windows Store App

  1. 1. Canvas in action in Windows Store Apps By Nir mal Hot a
  2. 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. 3. Canvas in action in Windows Store Apps Canvas capabilities Canvas in action with WinJS Ink data capture Demo
  4. 4. Canvas Capabilities Runtime script rendering Renders 2D objects/Shapes Renders bitmaps
  5. 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. 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. 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. 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. 9. Canvas in action with WinJS
  10. 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. 11. Ink data capture : Small Intro
  12. 12. Questions & Answer Session
  13. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×