M5 Canvas

Pablo Farias Navarro@ZenvaTweetshttps://zenva.com

Variables

Arrays

Functions

Canvas

Conditionals

Loops

Events

OOP

Intro

Draw a rectagle

LIVE CODING

.

The canvas gives us an area where we can draw pixels.

Document.getElementbyid, DOM is an object that repesents all the elements in the web page. All the elements that you see, are represented by a big object

Animation

LIVE CODING

.

We'll move a rectangle in the canvas

Step will be called many times per second

Window.requestAnimationFrame. The canvas is drawn multiple times per second, and requestAnim. Allows us to do something each time the canvas is drawn

Update the positionDraw (clean the canvas and redraw)

Illusion of movement

Show what happens if we don't clean

Coding Challenge!