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
   

   View Slide

2. >raphael amorim
   brazil. rio de janeiro.
   software developer.
   jquery / rio.js.
   works at globo.com.
   tweets from @raphamundi.
   

   View Slide

3. Some topics may generate
   discussions.
   

   View Slide

4. Personal opinions 

   

   on slides.
   

   View Slide

5. a lot of 8bit arts.
   

   View Slide

6. today
   

   View Slide

7. src="images/DougNYC.jpg"
   style="width: 500px; height: 500;">
   

   View Slide

8. function Filters() {};
   

   View Slide

9. function Filters() {
   function createCanvas(width, height) {
   var canvas = document.createElement('canvas');
   canvas.width = width;
   canvas.height = height;
   document.body.appendChild(c);
   return canvas;
   };
   };
   

   View Slide

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)
    };
    };
    };
    

    View Slide

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)
    };
    };
    

    View Slide

12. . . .
    this.threshold = function(pixels, threshold) {
    var d = pixels.data;
    for (var i=0; ivar 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;
    };
    };
    

    View Slide

13. var img = document.querySelector(‘#original');
    var filter = new Filters();
    filter.filterImage('threshold', img, 100);
    

    View Slide

14. pros
    

    View Slide

15. FASTest 

    

    DEVELOPment
    

    View Slide

16. a lot of
    TINY LIBS
    to help
    

    View Slide

17. DOESN’T need
    to USE standard
    API TO DEVELOP
    

    View Slide

18. cons
    

    View Slide

19. hard to test
    

    View Slide

20. *yeah, it's a con too
    DOESN’T need
    to USE standard
    API TO DEVELOP
    

    View Slide

21. unpluggable
    

    View Slide

22. Not all of
    the team
    know canvas
    *mycase
    

    View Slide

23. component-based
    html5 canvas
    

    View Slide

24. how?
    

    View Slide

25. let’s think
    about components
    

    View Slide

26. View Slide

27. GameBoy
    

    View Slide

28. nav
    

    View Slide

29. buttons
    

    View Slide

30. screen
    

    View Slide

31. Components 

    

    should be 

    

    reusable and
    pluggable
    

    View Slide

32. replacing components
    

    View Slide

33. removing components
    

    View Slide

34. reordering components
    

    View Slide

35. real cases?
    

    View Slide

36. Flipboard/

    react-canvas
    

    View Slide

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 (
    
    );
    }
    }
    

    View Slide

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 (
    
    );
    }
    }
    

    View Slide

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 (
    
    );
    }
    }
    

    View Slide

40. ReactDOM.render(,
    document.getElementById('container'));
    

    View Slide

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
    

    View Slide

42. raphamorim/

    origami.js
    

    View Slide

43. origami.createComponent('Trainer', function(octx, props) {
    octx.sprite(props.x, props.y, {
    src: 'images/red-trainer.png',
    frames: {
    total: 4
    },
    speed: 60
    })
    })
    

    View Slide

44. origami.createComponent('Trainer', function(octx, props) {
    octx.sprite(props.x, props.y, {
    src: 'images/red-trainer.png',
    frames: {
    total: 4
    },
    speed: 60
    })
    })
    

    View Slide

45. origami(‘#canvas-id’)

    .Header({x: 0, y: 0})

    .draw()
    

    View Slide

46. - Stateful
    origamijs
    * doesn’t need react
    * styles based on css
    * origamijs.com/docs/
    - immature yet
    * CHAINABLE
    

    View Slide

47. should i create 

    

    ui canvas components too?
    

    View Slide

48. should i create 

    

    ui canvas components too?
    

    View Slide

49. beyond.
    * github.com/raphamorim/GraphicalWeb2016
    

    View Slide

50. "THANKS!"
    -@RAPHAMUNDI
    

    View Slide