Using Canvas Components

CSS animations and transitions are the fastest path to smooth animations on the web, but they have several limitations. React Canvas leverages the fact that most modern mobile browsers now have hardware accelerated canvas. The purpose of this lecture is to show the "why" and the "how do it?" of create components based on canvas can be extremely powerful, but without hiding their limitations.

Transcript

1. Creating Canvas 
 
 Components @raphamundi
2. >raphael amorim brazil. rio de janeiro. software developer. jquery / rio.js. works at globo.com. tweets from @raphamundi.
3. Some topics may generate discussions.
4. Personal opinions 
 
 on slides.
5. a lot of 8bit arts.
6. today
7. <img id="original" 
 src="images/DougNYC.jpg" style="width: 500px; height: 500;">
8. function Filters() {};
9. function Filters() { function createCanvas(width, height) { var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; document.body.appendChild(c); return canvas; }; };
10. . . . function getPixels(img) { var cvs = createCanvas(img.width, img.height), ctx = cvs.getContext('2d');
 ctx.drawImage(img, 0, 0, img.width, img.height); return { ctx: ctx, data: 
 ctx.getImageData(0,0,cvs.width,cvs.height) }; }; };
11. . . . this.filterImage = function(filter, image, config) { var cvsImage = getPixels(image), args = [cvsImage.imageData, config];
 var filteredImage = this[filter].apply(null, args); cvsImage.ctx.putImageData(filteredImage, 0, 0) }; };
12. . . . this.threshold = function(pixels, threshold) { var d = pixels.data; for (var i=0; i<d.length; i+=4) { var r = d[i]; var g = d[i+1]; var b = d[i+2]; var v = (0.2126*r + 0.7152*g + 0.0722*b 
 >= threshold) ? 255 : 0; d[i] = d[i+1] = d[i+2] = v } return pixels; }; };
13. var img = document.querySelector(‘#original'); var filter = new Filters(); filter.filterImage('threshold', img, 100);
14. pros
15. FASTest 
 
 DEVELOPment
16. a lot of TINY LIBS to help
17. DOESN’T need to USE standard API TO DEVELOP
18. cons
19. hard to test
20. *yeah, it's a con too DOESN’T need to USE standard API TO DEVELOP
21. unpluggable
22. Not all of the team know canvas *mycase
23. component-based html5 canvas
24. how?
25. let’s think about components
27. GameBoy
28. nav
29. buttons
30. screen
31. Components 
 
 should be 
 
 reusable and pluggable
32. replacing components
33. removing components
34. reordering components
35. real cases?
36. Flipboard/
 react-canvas
37. class CanvasComponent extends React.Component { componentDidMount() { this.updateCanvas(); } updateCanvas() { const ctx = this.refs.canvas.getContext('2d'); ctx.fillRect(0,0, 100, 100); } render() { return ( <canvas ref="canvas" width={300} height={300}/> ); } }
38. class CanvasComponent extends React.Component { componentDidMount() { this.updateCanvas(); } updateCanvas() { const ctx = this.refs.canvas.getContext('2d'); ctx.fillRect(0,0, 100, 100); } render() { return ( <canvas ref="canvas" width={300} height={300}/> ); } }
39. class CanvasComponent extends React.Component { componentDidMount() { this.updateCanvas(); } updateCanvas() { const ctx = this.refs.canvas.getContext('2d'); ctx.fillRect(0,0, 100, 100); } render() { return ( <canvas ref="canvas" width={300} height={300}/> ); } }
40. ReactDOM.render(<CanvasComponent/>, document.getElementById('container'));
41. - It's NOT about drawing graphics... react-canvas * easy to tests * draw DOM-like objects on canvas element - needs reactjs * engineering.flipboard.com/2015/02/mobile-web/ - Performance
42. raphamorim/
 origami.js
43. origami.createComponent('Trainer', function(octx, props) { octx.sprite(props.x, props.y, { src: 'images/red-trainer.png', frames: { total: 4 }, speed: 60 }) })
44. origami.createComponent('Trainer', function(octx, props) { octx.sprite(props.x, props.y, { src: 'images/red-trainer.png', frames: { total: 4 }, speed: 60 }) })
45. origami(‘#canvas-id’)
 .Header({x: 0, y: 0})
 .draw()
46. - Stateful origamijs * doesn’t need react * styles based on css * origamijs.com/docs/ - immature yet * CHAINABLE
47. should i create 
 
 ui canvas components too?
48. should i create 
 
 ui canvas components too?
49. beyond. * github.com/raphamorim/GraphicalWeb2016
50. "THANKS!" -@RAPHAMUNDI