HTML Canvas tips & tricks - Lightning Talk by Roman Rodych
•
2 likes•615 views
Lightning Talk by WEB UI Developer at Innocode Roman Rodych about canvas with a special demo (is available on our youtube).
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to HTML Canvas tips & tricks - Lightning Talk by Roman Rodych
Similar to HTML Canvas tips & tricks - Lightning Talk by Roman Rodych (20)
More from Pivorak MeetUp
More from Pivorak MeetUp (20)
Recently uploaded
Recently uploaded (20)
HTML Canvas tips & tricks - Lightning Talk by Roman Rodych
- 1. <canvas> tips & tricks Roman Rodych 2017
- 5. Width and Height are important <canvas width="300" height="150"></canvas>
- 6. All you need is Context this.ctx = canvas.getContext(“2d”) ... let canvas = this.ctx.canvas;
- 7. What Canvas can render 1. Shapes 2. Texts 3. Gradient 4. Images
- 8. What Canvas recognize as image 1. <img> / Image 2. <video> 3. <html> 4. <canvas> 5. <svg>
- 9. Center text in canvas is easier than in CSS ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
- 10. Sharp horizontal line? It’s not so easy! const round = Math.round; ctx.moveTo(0, round(y) + 0.5); ctx.lineTo(width, round(y) + 0.5);
- 11. Clear (reset) canvas is weird canvas.width = canvas.width;
- 13. Clear for pussies ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
- 14. Transformations land ● translate(x, y) ● scale(x, y) ● rotate(angle)
- 15. Compose your drawing var path = new Path2D(); path1.rect(10, 10, 100, 100); path.moveTo(220, 60); path.arc(170, 60, 50, 0, 2 * Math.PI); ctx.stroke(path);
- 16. Caching drawings 1. Create virtual canvas 2. Render some expansive shapes or images 3. Draw virtual canvas on real canvas multiple times
- 17. Layers of canvases <canvas width=”100” height=”100”></canvas> ... <canvas width=”100” height=”100”></canvas>
- 18. Double buffering 1. Create virtual canvases 2. Draw objects on virtual canvases 3. Draw virtual canvases on real canvas (make projection)
- 19. Demo
- 20. Дякую!