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. 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

  26. None
  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