Canvas academy.zariba.com 1. Lecture Content 1.What is Canvas? 2.Including Canvas in your HTML...
-
Upload
damian-poole -
Category
Documents
-
view
246 -
download
0
Transcript of Canvas academy.zariba.com 1. Lecture Content 1.What is Canvas? 2.Including Canvas in your HTML...
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
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