Your SlideShare is downloading. ×
Canvas In Action in Windows Store App
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Canvas In Action in Windows Store App

757
views

Published on

All about - Canvas in action in Windows Store Apps.

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
757
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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