Your SlideShare is downloading. ×
0
Nik Sumeiko                Frontend engineermanakor.org                         @manakor
Simulating a feeling oferasing lottery ticket on your       mobile device      HTML5 <canvas> API experiment
Picture by jmoneyyyyyyy:http://www.flickr.com/photos/jmoneyyyyyy/6045818149/
Technology logic
Technology logic
Technology logic
Technology logic
Basic HTMLwith lottery result layer and canvas
Preparing hologram layer with HTML5 Canvas API
Listening to touch events to find user finger position
Drawing on every touchmoveImagine you draw on canvas with brush that          has transparent color.
Drawing on every touchmoveCreating a radial gradient to use for brush
Drawing on every touchmoveFilling gradient with semi-transparent white on          sides and transparent inside
The Demo
Experiment source code and the demo are               available on Github                  http://goo.gl/Jv5x9Nik Sumeiko ...
Upcoming SlideShare
Loading in...5
×

HTML5 Canvas finger lottery ticket eraser

1,833

Published on

Experiment that demonstrates how lottery hologram could be erased with a finger movement on iOS mobile device.
The experiment is based on HTML5 Canvas API.

Published in: Technology
3 Comments
0 Likes
Statistics
Notes
  • Hey Nic, email me directly; dory@tazlinc.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @doryzawahery, hi there. Let's connect on Twitter (here's a link to my profile: twitter.com/manakor) or on LinkedIn (linkedin.com/in/manakor), so I don't post my email right there in the comment. Looking forward.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi there. Do you have an email address for freelance work?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

No notes for slide

Transcript of "HTML5 Canvas finger lottery ticket eraser"

  1. 1. Nik Sumeiko Frontend engineermanakor.org @manakor
  2. 2. Simulating a feeling oferasing lottery ticket on your mobile device HTML5 <canvas> API experiment
  3. 3. Picture by jmoneyyyyyyy:http://www.flickr.com/photos/jmoneyyyyyy/6045818149/
  4. 4. Technology logic
  5. 5. Technology logic
  6. 6. Technology logic
  7. 7. Technology logic
  8. 8. Basic HTMLwith lottery result layer and canvas
  9. 9. Preparing hologram layer with HTML5 Canvas API
  10. 10. Listening to touch events to find user finger position
  11. 11. Drawing on every touchmoveImagine you draw on canvas with brush that has transparent color.
  12. 12. Drawing on every touchmoveCreating a radial gradient to use for brush
  13. 13. Drawing on every touchmoveFilling gradient with semi-transparent white on sides and transparent inside
  14. 14. The Demo
  15. 15. Experiment source code and the demo are available on Github http://goo.gl/Jv5x9Nik Sumeiko manakor.org @manakor
  1. A particular slide catching your eye?

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

×