Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Canvas Components

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.

Raphael Amorim

November 04, 2016
Tweet

More Decks by Raphael Amorim

Other Decks in Programming

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