Path, Properties, Paint

HTML5 Canvas and the
Pervasive Pixel Painting Protocol

Justin Love

http://wondible.com /pub/canvas_mke/

Overview

Examples

Paint

Games

Visualization

Fractals

Image Manipulation

Drawing Model

1. Provide Context

2. Set Transform (optional)

3. Create Path

4. Set Properties

5. Paint

5P

  1. Provide Context
  2. Pre-Transform
  3. Path
  4. Properties
  5. Paint

Canvas

Cairo

PS/PDF

SVG

Pervasive Pixel Painting Protocol

  1. Provide Context
  2. Pre-Transform
  3. Path
  4. Properties
  5. Paint

Messy Details

Caution

PG Programmer Guidance suggested
Some material may be not be suitable for children. Those with a developed sense of API aesthetics may wish to leave the room.

Rearranged

  1. Provide Context
  2. Paint
  3. Properties
  4. Path
  5. Pre-Transform

Provide Context

Canvas, Context

Tag

context

WebGL

State

Mutable
State

Shared
Mutable
State

Paint

Path
Paint

Immediate

Image

clearRect

strokeRect
fillRect

stroke
fill

Paint - Stroke

Paint - Fill

(note)
Examples use a transformed coordinate system

Text

Properties

Style

String Styles

Gradient

Pattern

Alpha

lineWidth

lineCap

lineJoin

Path

rect

Multiple Steps

Reset

Current Point

moveTo/lineTo

arc

arcTo

quadraticCurveTo

bezierCurveTo

Clip

Transforms

3 Basics

Translate

Scale

scale is Asymetric

Rotate (Radians: Math.PI * 2)

Ordering - rotate/translate

Ordering - translate/rotate

Ordering - path/transform

transform

Transform playground

5P

  1. Provide Context
  2. Pre-Transform
  3. Path
  4. Properties
  5. Paint

Save/Restore

Without Save/Restore

History

Forth

Postscript

PDF

Display Postscript

OS X

Dashboard

Canvas

Safari

The Web

Shadow

Warning
Shadow Offsets are not transformed

Pixels

Images

Slicing

Canvas -> Canvas

Read/Write

Security

http://erroraccessdenied.com/node/753

Composition

Immediate Mode

https://en.wikipedia.org/wiki/File:DeadParrot.png Copyright BBC

Retained Mode

Canvas vs. SVG Performance

Objects

Point in Path

Tricks

Animation Timing

Animation Timing

Layers

Dynamic Favicons

Unit Coordnatess

Old Opera

New Opera (12)

Higher Order Drawing

Saving a Canvas (Firefox)

Data-URL

Review

5P

  1. Provide Context
  2. Pre-Transform
  3. Path
  4. Properties
  5. Paint

Subroutine Thinking

Pixels

Resources

Browsers

Credits

Questions

Playground

Playground - transform

Playground - bare