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