Canvas academy.zariba.com 1

Lecture Content 1.What is Canvas? 2.Including Canvas in your HTML 3.Commands in Canvas 4.Drawing Shapes with Canvas 5.Animations with Canvas 2

3 What is Canvas? Canvas is the way to draw in your browser It uses JavaScript for the drawing with high-performance Canvas is part of HTML5, it is supported in most browsers You can think of it as a rectangular sheet (canvas) inside your HTML. All drawings are performed inside the sheet

4 Including Canvas in your HTML The canvas consists of HTML element and JavaScript API for the drawing Include in your HTML Include a script tag inside your HTML (or externally) Select the canvas and give it a context with: var canvas = document.getElementById(‘some-id’); var ctx = canvas.getContext(‘2d’); The context can be 2d, 3d or WebGL You are ready to draw

5 Commands in Canvas

Drawing Shapes with Canvas 6

Animations with Canvas 7

8 Homework 1.Compulsory! Make an animation with Canvas of your choice

9 References

10 Zariba Academy Questions