1

Canvas

academy.zariba.com

2

Lecture Content

1. What is Canvas?2. Including Canvas in your HTML3. Commands in Canvas4. Drawing Shapes with Canvas5. Animations with Canvas

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 <canvas> HTML element and JavaScript API for the drawing

• Include <canvas id=“some-id” width=“100” height=”200”> 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

6

Drawing Shapes with Canvas

7

Animations with Canvas

8

Homework

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

9

References

10

Zariba Academy

Questions