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.

Ed35943d3199ea37b1b60c39615e8163?s=128

Raphael Amorim

November 04, 2016
Tweet

Transcript

  1. 2.

    >raphael amorim brazil. rio de janeiro. software developer. jquery /

    rio.js. works at globo.com. tweets from @raphamundi.
  2. 6.
  3. 9.

    function Filters() { function createCanvas(width, height) { var canvas =

    document.createElement('canvas'); canvas.width = width; canvas.height = height; document.body.appendChild(c); return canvas; }; };
  4. 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) }; }; };
  5. 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) }; };
  6. 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; }; };
  7. 14.
  8. 18.
  9. 24.
  10. 26.
  11. 27.
  12. 28.

    nav

  13. 29.
  14. 30.
  15. 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}/> ); } }
  16. 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}/> ); } }
  17. 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}/> ); } }
  18. 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
  19. 46.

    - Stateful origamijs * doesn’t need react * styles based

    on css * origamijs.com/docs/ - immature yet * CHAINABLE