h t m l > < h t m l > < h e a d > < t i t l e > C a n v a s ! < / t i t l e > < / h e a d > < b o d y > < c a n v a s > < / c a n v a s > < / b o d y > < / h t m l >
h t m l > < h t m l > < h e a d > < t i t l e > C a n v a s ! < / t i t l e > < / h e a d > < b o d y > < c a n v a s > T h i s t e x t i s s h o w n , w h e n a b r o w s e r d o e s n o t s u p p o r t c a n v a s . < / c a n v a s > < / b o d y > < / h t m l >
t e x t = c a n v a s . g e t C o n t e x t ( ' 2 d ' ) ; WebGL context: WebGLRenderingContext v a r c o n t e x t = c a n v a s . g e t C o n t e x t ( ' w e b g l ' ) ;
R e c t ( x , y , w i d t h , h e i g h t ) ; v o i d s t r o k e R e c t ( x , y , w i d t h , h e i g h t ) ; v o i d c l e a r R e c t ( x , y , w i d t h , h e i g h t ) ; v o i d f i l l T e x t ( t e x t , x , y [ , m a x W i d t h ] ) ; v o i d s t r o k e T e x t ( t e x t , x , y [ , m a x W i d t h ] ) ; MDN: CanvasRenderingContext2D
n P a t h ( ) ; v o i d c l o s e P a t h ( ) ; v o i d m o v e T o ( x , y ) ; v o i d l i n e T o ( x , y ) ; v o i d b e z i e r C u r v e T o ( c p 1 x , c p 1 y , c p 2 x , c p 2 y , x , y ) ; v o i d r e c t ( x , y , w i d t h , h e i g h t ) ; v o i d f i l l ( ) ; v o i d s t r o k e ( ) ; MDN: CanvasRenderingContext2D
t a c r e a t e I m a g e D a t a ( w i d t h , h e i g h t ) ; I m a g e D a t a g e t I m a g e D a t a ( s x , s y , s w , s h ) ; v o i d p u t I m a g e D a t a ( i m a g e d a t a , d x , d y ) ; MDN: CanvasRenderingContext2D
o n a d j u s t F o r R e t i n a ( ) { i f ( ! w i n d o w . d e v i c e P i x e l R a t i o | | w i n d o w . d e v i c e P i x e l R a t i o < = 1 ) { r e t u r n ; } v a r w i d t h = c a n v a s . w i d t h ; v a r h e i g h t = c a n v a s . h e i g h t ; c a n v a s . s t y l e . w i d t h = w i d t h + ' p x ' ; c a n v a s . s t y l e . h e i g h t = h e i g h t + ' p x ' ; c a n v a s . w i d t h = w i d t h * w i n d o w . d e v i c e P i x e l R a t i o ; c a n v a s . h e i g h t = h e i g h t * w i n d o w . d e v i c e P i x e l R a t i o ; c o n t e x t . s c a l e ( w i n d o w . d e v i c e P i x e l R a t i o , w i n d o w . d e v i c e P i x e l R a t i o ) ; }
i o n d r a w ( ) { / / d r a w r o u t i n e s e t T i m e o u t ( d r a w , 1 0 0 0 / 6 0 ) ; } setInterval s e t I n t e r v a l ( f u n c t i o n ( ) { / / d r a w r o u t i n e } , 1 0 0 0 / 6 0 ) ;
i m a t i o n F r a m e ; f u n c t i o n s t a r t A n i m a t i o n ( ) { v a r s t e p = f u n c t i o n ( ) { / / d r a w r o u t i n e a n i m a t i o n F r a m e = w i n d o w . r e q u e s t A n i m a t i o n F r a m e ( s t e p ) ; } a n i m a t i o n F r a m e = w i n d o w . r e q u e s t A n i m a t i o n F r a m e ( s t e p ) ; } f u n c t i o n s t o p A n i m a t i o n ( ) { w i n d o w . c a n c e l A n i m a t i o n F r a m e ( a n i m a t i o n F r a m e ) ; } MDN: , requestAnimationFrame cancelAnimationFrame
longer than the timer will call it, the callback function gets queued. Could lead quickly to an "infinite" amount of queued callback functions. Timers continue to work in background tabs, the browser will render invisible animations (wastage of CPU and battery life). Especially bad for mobile devices. From https://dev.opera.com/articles/better-performance-with-requestanimationframe/
user (will stop in background tabs!). No wastage of CPU and battery life. Frame is only drawn when browser is ready and no other frame waits for drawing. No "infinite" amount of queued callback functions. From https://dev.opera.com/articles/better-performance-with-requestanimationframe/
one frame is requested. r e q u e s t A n i m a t i o n F r a m e has to be called within the callback to get an animation loop. You don't know, when the callback will be executed. Animations on the same page, where one is in the visible area and one not, will not run synchronously since the hidden one's r e q u e s t A n i m a t i o n F r a m e will not be called. From https://dev.opera.com/articles/better-performance-with-requestanimationframe/
mouse events like k e y d o w n , k e y u p , m o u s e d o w n or m o u s e m o v e . c a n v a s . a d d E v e n t L i s t e n e r ( ' m o u s e m o v e ' , f u n c t i o n ( m o u s e E v e n t ) { / / m o u s e e v e n t r o u t i n e } ) ; c a n v a s . a d d E v e n t L i s t e n e r ( ' k e y d o w n ' , f u n c t i o n ( k e y E v e n t ) { / / k e y d o w n e v e n t r o u t i n e } ) ; MDN: , MouseEvent KeyboardEvent
u c h s t a r t , t o u c h m o v e , t o u c h e n d . Consider using a library for recognizing gestures like . HammerJS c a n v a s . a d d E v e n t L i s t e n e r ( ' t o u c h m o v e ' , f u n c t i o n ( t o u c h E v e n t ) { / / t o u c h m o v e e v e n t r o u t i n e } ) ; MDN: , Touch events TouchEvent
manuelrauber
kyokonishito
inoue2002
hideg
ug
tamai_63
ramsey
martysuzuki
ikumatadokoro
lunastera
decoch
heyitsmohit
adachi
sstephenson
chriscoyier
lemiorhan
skipperchong
reverentgeek
mraible
notwaldorf
garrettdimon
lynnandtonic
hatefulcrawdad
addyosmani
trishagee
