15
Nik Sumeiko Frontend engineer manakor.org @manakor

HTML5 Canvas finger lottery ticket eraser

Embed Size (px)

Citation preview

Nik SumeikoFrontend engineer

manakor.org @manakor

Simulating a feeling of erasing 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 layerwith HTML5 Canvas API

Listening to 'touch' eventsto find user finger position

Drawing on every 'touchmove'Imagine you draw on canvas with brush that

has transparent color.

Drawing on every 'touchmove'Creating a radial gradient to use for brush

Drawing on every 'touchmove'Filling 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/Jv5x9

Nik Sumeiko manakor.org @manakor