Origami.js - HTML5 Canvas for Humans

Learn the canvas API for many developers has been an additional task. But it might be easier, for simple reasons: chainable canvas, stylize objects using the same notation CSS, easy access to the context using selector.

The Origami began as a project to teach javascript and geometry to children and today has been used to simplify the way we work with canvas (currently only in the context 2d, but in the future will also support WebGL).

Transcript

1. @RAPHAMundi Ո樌΄͵Η΄κϰЀϝφ Origami.js raphamorim/origami.js
2. Raphael Amorim Software Enginer •Kolab twitter.com/raphamundi github.com/raphamorim Advise: This guy really thinks he knows about some programming stuff. Please don’t agree with everything he says.
3. canvas @RAPHAMundi κϰЀϝφ
4. Canvas native interface @RAPHAMundi
5. @RAPHAMundi 1 var sun = new Image(); 2 var earth = new Image(); 3 function init(){ 4 sun.src = 'https://mdn.mozillademos. 5 org/files/1456/Canvas_sun.png'; 6 earth.src = 'https://mdn.mozillademos. 7 org/files/1429/Canvas_earth.png'; 8 window.requestAnimationFrame(draw); 9 } 10 11 function draw() { 12 var ctx = document.getElementById('canvas'). 13 getContext('2d'); 14 15 ctx.globalCompositeOperation = 'destination- 16 over'; 17 ctx.clearRect(0,0,300,300); // clear canvas 18 19 ctx.fillStyle = 'rgba(0,0,0,0.4)'; 20 ctx.strokeStyle = 'rgba(0,153,255,0.4)'; 21 ctx.save(); 22 ctx.translate(150,150); 23 24 // Earth 25 var time = new Date(); 26 ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() 27 + ((2*Math.PI)/60000)*time. 28 getMilliseconds() ); 29 ctx.translate(105,0); 30 ctx.fillRect(0,-12,50,24); // Shadow 31 ctx.drawImage(earth,-12,-12); 32 33 ctx.restore(); 34 35 ctx.beginPath(); 36 ctx.arc(150,150,105,0,Math.PI*2,false); // 37 Earth orbit 38 ctx.stroke(); 39 ctx.drawImage(sun,0,0,300,300); 40 window.requestAnimationFrame(draw); 41 } 42 43 init();
6. It can get better than this @RAPHAMundi
7. @RAPHAMundi 1 origami('#canvas') 2 .globalComposite('destination-over') 3 .clear() 4 .save() 5 .translate(150, 150) 6 .rotate('slow') 7 .translate(105, 0) 8 .image('images/Canvas_earth.png', -12, -12) 9 .restore() 10 .arc(150, 150, 105, { 11 'border': '1px #FFF' 12 }) 13 .image('images/Canvas_sun.png') 14 .nextFrame(this)
8. “I prefer CSS” @RAPHAMundi
9. @RAPHAMundi 1 .pac-man { 2 width: 0px; 3 height: 0px; 4 border-right: 60px solid transparent; 5 border-top: 60px solid red; 6 border-left: 60px solid red; 7 border-bottom: 60px solid red; 8 border-top-left-radius: 60px; 9 border-top-right-radius: 60px; 10 border-bottom-left-radius: 60px; 11 border-bottom-right-radius: 60px; 12 }
10. @RAPHAMundi 1 .pac-man { 2 width: 0px; 3 height: 0px; 4 border-right: 60px solid transparent; 5 border-top: 60px solid red; 6 border-left: 60px solid red; 7 border-bottom: 60px solid red; 8 border-top-left-radius: 60px; 9 border-top-right-radius: 60px; 10 border-bottom-left-radius: 60px; 11 border-bottom-right-radius: 60px; 12 } 1 origami('#canvas-id').styles('.pac-man') 2 .shape('.pac-man')
11. @RAPHAMundi 1 .pac-man { 2 width: 0px; 3 height: 0px; 4 border-right: 60px solid transparent; 5 border-top: 60px solid red; 6 border-left: 60px solid red; 7 border-bottom: 60px solid red; 8 border-top-left-radius: 60px; 9 border-top-right-radius: 60px; 10 border-bottom-left-radius: 60px; 11 border-bottom-right-radius: 60px; 12 } 1 origami('#canvas-id').styles('.pac-man') 2 .shape('.pac-man')
12. What’s the future? @RAPHAMundi
13. VirtualCanvas @RAPHAMundi Buffers everywhere
14. Accessibility Support @RAPHAMundi
15. Origami.js -> PSP @RAPHAMundi
16. we need you! @RAPHAMundi