środa, 30 maja 2012

HTML5 - jeszcze o Canvas i coś ponadto

Dziś trochę notatek uzupełniających o Canvas w HTML5 (z Deep Dive Into HTML5 <canvas>) oraz trochę innych ciekawych informacji.









Różnice w sposobie rysowania pomiędzy niektórymi przeglądarkami


Saving & restoring

Security model

  • Canvas also allows drawing cross-domain images/videos
  • However, it has built-in security protection against third-parties saving cross-domain pixels
  • Canvas protects against Information Leakage attacks
  • Canvas has a concept of origin-clean flag
    • origin-clean is set false if a cross-domain IMG or VIDEO is used
    • A SECURITY_ERR exception is raised, if one tries to save the Canvas pixels if the Canvas origin-clean is false:
      • toDataURL()
      • getImageData()


  • Fallback Content Focus (spec stable)
    • When the Canvas has embedded content, it can be keyboard-focusable via accessibility tools.
  • Focus Management (spec unstable)
    • A focus ring can be drawn on the Canvas corresponding to embedded content in the Canvas fallback.
  • Fallback Content Focus
    • Access to the DOM tree within <canvas></canvas> tags
    • Recall, elements within the <canvas></canvas> tags are considered Fallback content and are only displayed on screen when Canvas is not supported.
    • This same Fallback area can be used for Accessibility description of what is on the Canvas


Najlepsze praktyki

  • Detekcja

       var canvas = document.createElement(“canvas”);

            if (canvas && canvas.getContext && canvas.getContext(“2d”))


                 // Code requiring canvas support

             } else {

                // Canvas isn’t available.

                // Put non-canvas fallback here


  • Zawsze dodawać !DOCTYPE. Dla HTML5 oznacza to <!DOCTYPE html>
  • Make Fewer Calls to Video Memory
    • Reading and writing to video memory is slow.
    • DON’T: Repeatedly call getImageData() or putImageData() for small amounts of data.
    • DO: Request larger area of data with fewer calls.
  • Cache Pixel Array Data
    • Accessing ImageData.data[i] requires DOM access to fetch and index the object
    • DON’T: Repeatedly access ImageData.data[i] for data.
    • DO: Cache the ImageData.data in a Javascript object.
  • Canvas objects as D3D textures
    • Canvas objects and patterns are implemented as D3D textures.
    • DON’T: Create new Canvas objects/patterns every frame.
    • DO: Re-use existing Canvas objects/patterns.
    • DON’T: Clear Canvas by setting dimensions every frame.
    • DO: Call clearRect() to clear the Canvas.
  • Drawing the Canvas to itself
    • Re-using a Canvas object is faster than creating an intermediate texture.
    • DON’T: drawImage() a Canvas to itself, as this requires creating intermediate texture.
    • DO: Use multiple Canvas objects instead.
  • Avoid clearRect() with Transforms
    • AVOID: Setting a geometric clip, rotation or skew transform when calling clearRect() - it will be much slower.
    • AVOID: Using clearRect() when clearing paths on non-whole pixel boundaries.
  • Avoid changing attribute settings
    • Avoid setting attributes unnecessarily
    • While costs are usually small, avoiding all unnecessary DOM calls will help in high performance applications.
    • Some attributes are slower to set than others.
  • Memory Management
    • DON’T: Hold references to objects that cannot be garbage collected
      • Will cause associated resources to be held in memory
    • DON’T: Unintentionally Cache graphics objects in globals or expandos
      • Objects such as canvas, pattern, image data, and gradients
  • SetTimeOut() and SetInterval()
    • Monitors typically display at 60Hz or 16.7ms periods.
    • For graphics timers, no point in using a higher resolution
    • DO: Use a 17ms interval for setTimeOut() and SetInterval(). They take integer values – round up 16.7ms.
    • DON’T: Use a 1ms interval for timers
    • Using a smaller interval than 17ms has no benefit: it results in choppy animation and reduced battery life


  • Canvas can draw SVG, images, videos and other Canvases on Canvas.
  • You can use Canvas and SVG in the same application complimenting each other.


Coś ponadto:

Geolokalizacja - micro format



Współdziałanie Knockout z ASP.NET MVC (który automatycznie obsługuje serializację JSON <-> obiektów .NET)




Brak komentarzy: