Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

1,369 views

Published on

All about - Canvas in action in Windows Store Apps.

  • Be the first to comment

  • Be the first to like this

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

×