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
Manuel Rauber
manuelrauber
reverentgeek
rmw
skipperchong
carmenhchung
keathley
productmarketing
clairelew
thoeni
jcasabona
