Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML Canvas tips & tricks - Lightning Talk by Roman Rodych

397 views

Published on

Lightning Talk by WEB UI Developer at Innocode Roman Rodych about canvas with a special demo (is available on our youtube).

Published in: Software

HTML Canvas tips & tricks - Lightning Talk by Roman Rodych

  1. 1. <canvas> tips & tricks Roman Rodych 2017
  2. 2. What is Canvas?
  3. 3. Width and Height are important <canvas width="300" height="150"></canvas>
  4. 4. All you need is Context this.ctx = canvas.getContext(“2d”) ... let canvas = this.ctx.canvas;
  5. 5. What Canvas can render 1. Shapes 2. Texts 3. Gradient 4. Images
  6. 6. What Canvas recognize as image 1. <img> / Image 2. <video> 3. <html> 4. <canvas> 5. <svg>
  7. 7. Center text in canvas is easier than in CSS ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
  8. 8. 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);
  9. 9. Clear (reset) canvas is weird canvas.width = canvas.width;
  10. 10. canvas.width = canvas.width;
  11. 11. Clear for pussies ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
  12. 12. Transformations land ● translate(x, y) ● scale(x, y) ● rotate(angle)
  13. 13. 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);
  14. 14. Caching drawings 1. Create virtual canvas 2. Render some expansive shapes or images 3. Draw virtual canvas on real canvas multiple times
  15. 15. Layers of canvases <canvas width=”100” height=”100”></canvas> ... <canvas width=”100” height=”100”></canvas>
  16. 16. Double buffering 1. Create virtual canvases 2. Draw objects on virtual canvases 3. Draw virtual canvases on real canvas (make projection)
  17. 17. Demo
  18. 18. Дякую!

×