Ejemplos CANVAS

Graphics

• Example that draws a filled rectangle in red
• Draw 2 filled red rectangles with a blue outline of 5 pixels and some text
• GEOMETRIC Transformations
• Example that draws rectangles in immediate mode
• Drawing text
• Drawing images
• Drawing images1
• Drawing images from a video stream
• Path drawing: lines
• Drawing lines with different styles
• Drawing arrows
• Drawing circles
• Quadratic curves
• Bezier curves
• Canvas context: colors
• Linear gradients
• Radial gradients
• Radial gradients1
• Painting with patterns
• Multiple image loader
• Drawing shadows (unwanted)
• Drawing shadows (correct)
• Styling lines
• HTML5 Canvas Cheat Sheet

Animation

• Animation using setInterval(...) function
• Animate the monster in a canvas, using setInterval
• Animate the monster in a canvas, using setTimeout
• Animate the monster with requestAnimationFrame
• Move the monster with the keyboard
• Adding a key listener to the window object
• Computing the mouse position
• Draw in a canvas, like if you were using a pencil
• Draw in a canvas, like pencil only when a mouse button is pressed
• Changing the size of a canvas on the fly erases its content!
• Resize a canvas using CSS width and height properties with percentages
• Advanced event handling / collision detection / time based animation
• Sprite based animation
• Popular game in HTML5