Home > Tutorials > HTML5 > HTML5 Graphics > Canvas Images > drawImage > Draw Image on Canvas

Draw Image on Canvas

HTML5

🧭

Tutorial Hierarchy

HTML5 Semantic Elements
- <header>
  - Definition
    
    Introductory Content Container
  - Usage
    
    Page Header Section Header
  - Multiple Headers
    
    Multiple Headers Allowed per Page
  - SEO Impact
    
    Search Engine Understanding
- <nav>
  - Definition
    
    Navigation Links Container
  - Usage
    
    Primary Secondary Navigation
  - Accessibility
    
    Screen Reader Navigation Landmark
- <main>
  - Definition
    
    Main Content Container
  - Rule
    
    Only One Main per Page
  - Accessibility
    
    Skip to Main Content Link
- <article>
  - Definition
    
    Self Contained Content
  - Usage
    
    Blog Post News Article Forum Post
  - Nesting
    
    Nested Articles for Comments
- <section>
  - Definition
    
    Thematic Grouping of Content
  - Rule
    
    Should Have Heading Inside
  - Section vs Article
    
    Difference and Use Cases
- <aside>
  - Definition
    
    Sidebar Content
  - Usage
    
    Related Links Advertisement Author Bio
- <footer>
  - Definition
    
    Footer Content Container
  - Usage
    
    Copyright Contact Links Social Media
  - Multiple Footers
    
    Multiple Footers Allowed
- <figure>
  - Definition
    
    Self Contained Media
  - Usage
    
    Images Diagrams Code Snippets
- <figcaption>
  - Definition
    
    Caption Inside Figure
  - Placement
    
    First or Last Child of Figure
  - Styling
    
    Custom CSS for Captions
- <details>
  - Definition
    
    Expandable Disclosure Widget
  - open Attribute
    
    Start Expanded State
  - name Attribute
    
    Exclusive Accordion Group
  - CSS Styling
    
    Custom Marker Triangle
- <summary>
  - Definition
    
    Visible Heading for Details
  - Content
    
    Can Contain HTML Elements
  - Default Style
    
    Bold Text with Triangle
- <mark>
  - Definition
    
    Highlighted Text
  - Usage
    
    Search Results Highlighting
  - Default Style
    
    Yellow Background
- <time>
  - Definition
    
    Machine Readable Date Time
  - datetime Attribute
    
    YYYY-MM-DD Format
  - pubdate Attribute
    
    Article Publication Date
- <progress>
  - Definition
    
    Progress Bar
  - Attributes
    
    value max
  - Indeterminate State
    
    No value Attribute
- <meter>
  - Definition
    
    Gauge Meter
  - Attributes
    
    min max value low high optimum
  - Use Cases
    
    Disk Usage Battery Level
- <dialog>
  - Definition
    
    Modal Dialog Box
  - open Attribute
    
    Visible State
  - showModal Method
    
    Show Modal Dialog
  - show Method
    
    Show Non Modal Dialog
  - close Method
    
    Close Dialog
  - returnValue
    
    Dialog Return Value
  - Form Method Dialog
    
    Submit Form Inside Dialog
  - Browser Support
    
    Chrome Edge 2022+ Firefox Partial
- <bdi>
  - Definition
    
    Bidirectional Isolation
  - Usage
    
    User Generated Content with Unknown Direction
- <wbr>
  - Definition
    
    Word Break Opportunity
  - Usage
    
    Long URL Break Points
- <data>
  - Definition
    
    Machine Readable Content
  - value Attribute
    
    Data Value
- <ruby>
  - Definition
    
    Ruby Annotation for East Asian Text
  - Usage
    
    Japanese Kanji Reading
    
    Chinese Pinyin
- <rt>
  - Definition
    
    Ruby Text Pronunciation
  - Placement
    
    Inside Ruby Tag
- <rp>
  - Definition
    
    Ruby Parenthesis Fallback
  - Purpose
    
    Show Parentheses in Old Browsers
HTML5 Form 2.0
- New Input Types
  - email
    
    Email Address Input
  - tel
    
    Telephone Number Input
  - url
    
    Website URL Input
  - search
    
    Search Field Input
  - number
    
    Numeric Input with Spinner
  - range
    
    Slider Control
  - date
    
    Date Picker
  - month
    
    Month Picker
  - week
    
    Week Picker
  - time
    
    Time Picker
  - datetime-local
    
    Local Date Time Picker
  - color
    
    Color Picker
  - file with multiple
    
    Multiple File Selection
  - image
    
    Image as Submit Button
- New Input Attributes
  - placeholder
    
    Input Hint Text
  - required
    
    Mandatory Field
  - autofocus
    
    Auto Focus on Page Load
  - pattern
    
    Regex Validation
  - min
    
    max
  - step
    
    Number Increment Step
  - formaction
    
    Override Form Action URL
  - formenctype
    
    Override Form Encoding
  - formmethod
    
    Override Form Method
  - formnovalidate
    
    Disable Validation
  - formtarget
    
    Override Form Target
  - list
    
    Datalist ID Connection
  - autocomplete
    
    on off values
  - multiple
    
    Multiple Values Allowed
  - dirname
    
    Send Field Direction
  - inputmode
    
    Keyboard Type Hint
- New Form Elements
  - <datalist>
    
    Autocomplete Options
  - <output>
    
    Calculation Result Display
  - <keygen>
    
    Key Pair Generator Deprecated
- Form Validation
  - Constraint Validation API
    
    checkValidity
  - setCustomValidity
    
    Custom Error Message
  - reportValidity
    
    Show Validation Messages
  - validity Object
    
    Validity State Properties
  - Validation Pseudo Classes
    
    :valid :invalid :required
  - Novalidate Attribute
    
    Disable Form Validation
HTML5 Graphics
- Canvas Basic
  - Canvas Element
    
    <canvas> Tag
  - Canvas Size
    
    width height Attributes
  - Fallback Content
    
    Text for Old Browsers
- Canvas 2D Context
  - getContext
    
    2d Context
  - Rendering Context
    
    CanvasRenderingContext2D
- Canvas Shapes
  - Rects
    
    fillRect strokeRect clearRect
  - Paths
    
    beginPath closePath
  - Lines
    
    moveTo lineTo
  - Arcs
    
    arc arcTo
  - Curves
    
    quadraticCurveTo bezierCurveTo
- Canvas Colors
  - fillStyle
    
    Solid Fill Color
  - strokeStyle
    
    Stroke Color
  - globalAlpha
    
    Transparency
- Canvas Gradients
  - Linear Gradient
    
    createLinearGradient
  - Radial Gradient
    
    createRadialGradient
  - Conic Gradient
    
    createConicGradient
- Canvas Patterns
  - createPattern
    
    Image Pattern Repeat
- Canvas Text
  - fillText
    
    Draw Filled Text
  - strokeText
    
    Draw Outline Text
  - font
    
    Font Property
  - textAlign
    
    Left Center Right
  - textBaseline
    
    Top Middle Bottom
  - measureText
    
    Get Text Width
- Canvas Images
  - drawImage
    
    Draw Image on Canvas
  - Image Cropping
    
    Crop with drawImage
  - Image Scaling
    
    Scale with drawImage
- Canvas Transformations
  - translate
    
    Move Origin
  - rotate
    
    Rotate Canvas
  - scale
    
    Scale Canvas
  - transform
    
    Matrix Transformation
  - setTransform
    
    Reset Transform
  - resetTransform
    
    Identity Transform
- Canvas State
  - save
    
    Save Canvas State
  - restore
    
    Restore Canvas State
- Canvas Compositing
  - globalCompositeOperation
    
    Blend Modes
- Canvas Shadows
  - shadowColor
    
    Shadow Color
  - shadowBlur
    
    Shadow Blur Amount
  - shadowOffsetX
    
    Horizontal Shadow Offset
  - shadowOffsetY
    
    Vertical Shadow Offset
- Canvas Clipping
  - clip
    
    Set Clipping Region
- Canvas Filters
  - filter
    
    Blur Grayscale Brightness
- Canvas Pixel Manipulation
  - getImageData
    
    Get Pixel Data
  - putImageData
    
    Put Pixel Data
  - createImageData
    
    Create Blank Image Data
- Canvas Animation
  - requestAnimationFrame
    
    Smooth Animation
  - Clear Canvas
    
    clearRect
  - Frames per Second
    
    60 FPS Target
  - Delta Time
    
    Frame Independent Movement
- Canvas Events
  - Click Detection
    
    isPointInPath
  - isPointInStroke
    
    Detect Line Click
- Canvas Export
  - toDataURL
    
    Export as PNG JPG
  - toBlob
    
    Export as Blob
- SVG Basic
  - SVG Element
    
    <svg> Tag
  - viewBox
    
    Coordinate System
  - width height
    
    Canvas Size
  - xmlns
    
    Namespace Declaration
- SVG Shapes
  - Rectangle
    
    <rect>
  - Circle
    
    <circle>
  - Ellipse
    
    <ellipse>
  - Line
    
    <line>
  - Polyline
    
    <polyline>
  - Polygon
    
    <polygon>
- SVG Path
  - Path Element
    
    <path>
  - Move To
    
    M Command
  - Line To
    
    L Command
  - Horizontal Line
    
    H Command
  - Vertical Line
    
    V Command
  - Close Path
    
    Z Command
  - Arc
    
    A Command
  - Quadratic Bezier
    
    Q Command
  - Cubic Bezier
    
    C Command
- SVG Text
  - Text Element
    
    <text>
  - Text Styling
    
    fill font-size
  - Text Path
    
    <textPath>
  - Multi Line
    
    <tspan>
- SVG Styling
  - Fill Color
    
    fill Attribute
  - Stroke Color
    
    stroke Attribute
  - Stroke Width
    
    stroke-width
  - Opacity
    
    fill-opacity stroke-opacity
- SVG Transform
  - Translate
    
    transform translate
  - Rotate
    
    transform rotate
  - Scale
    
    transform scale
  - Matrix
    
    transform matrix
- SVG Group
  - Group Element
    
    <g>
- SVG Use
  - Reuse Element
    
    <use>
- SVG Defs
  - Definitions
    
    <defs>
- SVG Gradients
  - Linear Gradient
    
    <linearGradient>
  - Radial Gradient
    
    <radialGradient>
- SVG Patterns
  - Pattern Element
    
    <pattern>
- SVG Animation
  - Animate Element
    
    <animate>
  - Animate Transform
    
    <animateTransform>
  - Animate Motion
    
    <animateMotion>
- SVG Filters
  - Filter Element
    
    <filter>
  - Blur Filter
    
    feGaussianBlur
  - Drop Shadow
    
    feDropShadow
  - Color Matrix
    
    feColorMatrix
  - Blend
    
    feBlend
  - Merge
    
    feMerge
- SVG Clipping
  - Clip Path
    
    <clipPath>
- SVG Masking
  - Mask Element
    
    <mask>
- SVG Accessibility
  - Title Element
    
    <title>
  - Description Element
    
    <desc>
  - ARIA Role
    
    role img
- SVG Optimization
  - SVG Minification
    
    Remove Metadata
  - SVG Sprites
    
    Single File Multiple Icons
  - Inline SVG
    
    Better Performance
- WebGL Basic
  - WebGL Context
    
    webgl or experimental-webgl
  - WebGL vs Canvas
    
    3D vs 2D
  - WebGL Versions
    
    WebGL 1.0 WebGL 2.0
- WebGL Shaders
  - Vertex Shader
    
    Position Processing
  - Fragment Shader
    
    Color Processing
  - GLSL Language
    
    Shader Code
- WebGL Buffers
  - Vertex Buffer
    
    Geometry Data
  - Index Buffer
    
    Element Indices
- WebGL Textures
  - Texture Mapping
    
    Image on Geometry
- WebGL 3D
  - 3D Objects
    
    Cubes Spheres
  - Lighting
    
    Ambient Diffuse Specular
  - Camera
    
    Perspective View Matrix
- WebGL Libraries
  - Three.js
    
    Popular WebGL Library
  - Babylon.js
    
    Microsoft 3D Library
  - PlayCanvas
    
    Game Engine
- WebGL Performance
  - Optimization
    
    Draw Call Batching
HTML5 Media
- Video Element
  - <video> Tag
    
    Video Player
  - src Attribute
    
    Video File URL
- Video Attributes
  - controls
    
    Show Play Pause Volume
  - autoplay
    
    Start Playing Automatically
  - loop
    
    Repeat Video
  - muted
    
    Start Muted for Autoplay
  - poster
    
    Thumbnail Image
  - preload
    
    Load Video on Page Load
  - width height
    
    Video Player Dimensions
  - crossorigin
    
    CORS Support
  - playsinline
    
    Inline Play on iOS
- Video Source
  - <source> Element
    
    Multiple Video Formats
  - type Attribute
    
    MIME Type
  - MP4 Format
    
    H.264 Best Support
  - WebM Format
    
    VP8 VP9 Open Source
  - OGG Format
    
    Theora Codec
- Video Methods
  - play
    
    Start Video Playback
  - pause
    
    Pause Video Playback
  - load
    
    Reload Video
  - canPlayType
    
    Check Format Support
- Video Properties
  - currentTime
    
    Get Set Current Time
  - duration
    
    Video Length
  - volume
    
    Volume Level 0-1
  - paused
    
    Check if Paused
  - ended
    
    Check if Finished
  - buffered
    
    Buffered Time Range
- Video Events
  - loadedmetadata
    
    Metadata Loaded
  - canplay
    
    Enough Data to Play
  - play
    
    Pause
  - waiting
    
    Buffering Event
  - error
    
    Video Error
  - timeupdate
    
    Current Time Update
  - seeking
    
    Seek Started
  - seeked
    
    Seek Finished
- Video Tracks
  - <track> Element
    
    Text Track
  - kind="subtitles"
    
    Subtitles
  - kind="captions"
    
    Captions
  - kind="descriptions"
    
    Audio Descriptions
  - kind="chapters"
    
    Chapter Markers
  - kind="metadata"
    
    Metadata Track
  - WebVTT Format
    
    .vtt File Format
  - src Attribute
    
    Track File URL
  - srclang
    
    Language Code
  - label
    
    Track Label
  - default
    
    Default Track
  - Video Captions
    
    Closed Captions
- Video Custom Controls
  - Play Pause Button
    
    Custom Play Pause
  - Volume Slider
    
    Volume Control
  - Progress Bar
    
    Seek Control
  - Fullscreen Button
    
    Fullscreen API
  - Playback Speed
    
    playbackRate
- Video Responsive
  - Responsive Video
    
    Width 100% Height Auto
  - Aspect Ratio
    
    16:9 Ratio
  - Padding Trick
    
    Padding Bottom 56.25%
- Video Streaming
  - HLS Streaming
    
    m3u8 Playlist
  - DASH Streaming
    
    MPEG-DASH
  - Adaptive Bitrate
    
    Quality Based on Bandwidth
- Video DRM
  - Encrypted Media Extensions
    
    EME API
  - Widevine
    
    Google DRM
  - PlayReady
    
    Microsoft DRM
  - FairPlay
    
    Apple DRM
- Audio Element
  - <audio> Tag
    
    Audio Player
  - src Attribute
    
    Audio File URL
- Audio Attributes
  - controls
    
    Show Play Pause
  - autoplay
    
    Play Automatically
  - loop
    
    Repeat Audio
  - muted
    
    Start Muted
  - preload
    
    Load Audio
- Audio Source
  - MP3 Format
    
    Best Compatibility
  - OGG Format
    
    OGG Vorbis
  - WAV Format
    
    Uncompressed
  - AAC Format
    
    Advanced Audio Coding
- Audio Methods
  - play
    
    Pause
- Audio Properties
  - currentTime
    
    Seek Audio
  - duration
    
    Audio Length
  - volume
    
    Volume Control
- Audio Events
  - canplay
    
    Loaded Data
  - ended
    
    Playback Finished
- Audio Visualization
  - Web Audio API
    
    Audio Context
  - Analyser Node
    
    Frequency Data
  - Canvas Drawing
    
    Visualizer Effect
- Audio Recording
  - MediaRecorder API
    
    Record Audio
  - getUserMedia
    
    Microphone Access
  - Save Recording
    
    Blob Download
HTML5 Offline
- Application Cache
  - AppCache
    
    Deprecated Feature
  - manifest Attribute
    
    Cache Manifest File
  - CACHE MANIFEST
    
    Manifest Sections
  - NETWORK
    
    Network Resources
  - FALLBACK
    
    Fallback Resources
  - Deprecation
    
    Replaced by Service Workers
- Service Workers
  - Service Worker Registration
    
    register Method
  - Service Worker Scope
    
    Path Scope
  - Install Event
    
    Cache Assets
  - Activate Event
    
    Clean Old Caches
  - Fetch Event
    
    Network Request Intercept
  - Cache Strategies
    
    Cache First
    
    Network First
    
    Stale While Revalidate
    
    Cache Only
    
    Network Only
  - Cache Storage
    
    caches.open
    
    cache.addAll
    
    cache.match
    
    cache.delete
  - Offline Page
    
    Fallback HTML Page
  - Update Service Worker
    
    New Version Activation
  - skipWaiting
    
    Force Update
  - clients.claim
    
    Take Control of Pages
  - Service Worker Events
    
    install activate fetch
  - Service Worker Lifecycle
    
    Register Installing Activated
  - Service Worker Debugging
    
    Chrome DevTools Application
- IndexedDB
  - IndexedDB Introduction
    
    Client Side Database
  - Database Creation
    
    indexedDB.open
  - Object Store
    
    createObjectStore
  - Transaction
    
    readonly readwrite
  - CRUD Operations
    
    add get put delete
  - Cursor
    
    openCursor
  - Indexes
    
    createIndex
  - Key Range
    
    IDBKeyRange
  - Version Upgrade
    
    onupgradeneeded
  - Error Handling
    
    onerror
  - Async API
    
    Promise Based
  - IDBRequest
    
    Request Object
  - IDBDatabase
    
    Database Object
  - IDBTransaction
    
    Transaction Object
  - IDBObjectStore
    
    Store Object
  - IDBIndex
    
    Index Object
  - IDBCursor
    
    Cursor Object
  - Use Cases
    
    Offline Data Storage
    
    Caching JSON Data
    
    File Storage
- Local Storage
  - localStorage
    
    Synchronous Storage
  - setItem
    
    Store Data
  - getItem
    
    Retrieve Data
  - removeItem
    
    Remove Data
  - clear
    
    Clear All Data
  - key
    
    Get Key by Index
  - length
    
    Number of Items
  - Storage Event
    
    Cross Tab Communication
  - JSON Storage
    
    JSON.stringify parse
  - Storage Limit
    
    5-10 MB
  - Use Cases
    
    User Preferences
    
    Shopping Cart
    
    Form Data Persistence
- Session Storage
  - sessionStorage
    
    Tab Specific Storage
  - setItem
    
    Store Session Data
  - getItem
    
    Retrieve Session Data
  - removeItem
    
    Remove Session Data
  - clear
    
    Clear Session Data
  - Session Limit
    
    Tab Close Clear
  - Use Cases
    
    Temporary Data
    
    Form Wizard
- Web SQL Database
  - Web SQL
    
    Deprecated Feature
  - openDatabase
    
    Open Database
  - transaction
    
    Execute SQL
  - Deprecation
    
    IndexedDB Replacement
HTML5 Device Access
- Geolocation API
  - getCurrentPosition
    
    Get User Location
  - watchPosition
    
    Continuous Location Updates
  - clearWatch
    
    Stop Watching
  - Position Object
    
    latitude longitude
  - Accuracy
    
    accuracy Property
  - Altitude
    
    altitude Property
  - Speed
    
    speed Property
  - Heading
    
    heading Property
  - Error Handling
    
    Permission Denied
  - Options
    
    enableHighAccuracy
    
    timeout
    
    maximumAge
  - User Permission
    
    Privacy Requirement
  - Reverse Geocoding
    
    Convert to Address
  - Map Integration
    
    Google Maps Leaflet
- Device Orientation
  - deviceorientation
    
    Alpha Beta Gamma
  - Alpha
    
    Compass Direction 0-360
  - Beta
    
    Front Back Tilt -180-180
  - Gamma
    
    Left Right Tilt -90-90
  - deviceorientationabsolute
    
    Absolute Orientation
  - Permission Required
    
    Sensor Permissions
  - Use Cases
    
    Parallax Effect
    
    Panorama Viewer
- Device Motion
  - devicemotion
    
    Acceleration Data
  - acceleration
    
    Acceleration X Y Z
  - accelerationIncludingGravity
    
    With Gravity
  - rotationRate
    
    Rotation Alpha Beta Gamma
  - interval
    
    Update Interval
  - Use Cases
    
    Step Counter
    
    Shake Detection
    
    Mobile Games
- Vibration API
  - navigator.vibrate
    
    Vibrate Device
  - Vibration Pattern
    
    Array Pattern
  - Cancel Vibration
    
    0 or Empty Array
  - Use Cases
    
    Games Haptics
    
    Notifications
- Battery Status API
  - navigator.getBattery
    
    Get Battery Info
  - charging
    
    Is Battery Charging
  - chargingTime
    
    Time to Full Charge
  - dischargingTime
    
    Time to Empty
  - level
    
    Battery Percentage 0-1
  - chargingchange Event
    
    Charging Status Change
  - levelchange Event
    
    Battery Level Change
  - Use Cases
    
    Power Saving Mode
- Network Information API
  - navigator.connection
    
    Network Info
  - effectiveType
    
    4g 3g 2g slow-2g
  - downlink
    
    Download Speed Mbps
  - rtt
    
    Round Trip Time ms
  - saveData
    
    Data Saving Mode
  - change Event
    
    Network Change
  - Use Cases
    
    Adaptive Loading
    
    Quality Adjustment
- Ambient Light Sensor
  - AmbientLightSensor
    
    Light Level Detection
  - illuminance
    
    Light Intensity
  - Use Cases
    
    Adaptive Brightness
- Proximity Sensor
  - Proximity Sensor
    
    Device Distance Detection
  - Use Cases
    
    Screen On Off
HTML5 Communication
- WebSocket API
  - WebSocket Connection
    
    new WebSocket
  - WebSocket Events
    
    onopen onmessage onclose onerror
  - send Method
    
    Send Data to Server
  - close Method
    
    Close Connection
  - readyState
    
    Connection State
  - bufferedAmount
    
    Unsent Data
  - binaryType
    
    Blob or ArrayBuffer
  - WebSocket vs HTTP
    
    Persistent Connection
  - Use Cases
    
    Chat Applications
    
    Real Time Games
    
    Live Updates
- Server Sent Events
  - EventSource
    
    Server to Client Stream
  - new EventSource
    
    Create Connection
  - onmessage
    
    Message Handler
  - Event Types
    
    Data Event
  - Custom Events
    
    Event Name Field
  - onerror
    
    Error Handler
  - close
    
    Close Connection
  - withCredentials
    
    Credentials Support
  - Use Cases
    
    Notifications
    
    Live Scores
    
    Stock Ticker
  - SSE vs WebSocket
    
    One Way vs Two Way
- WebRTC
  - RTCPeerConnection
    
    P2P Connection
  - getUserMedia
    
    Camera Microphone Access
  - getDisplayMedia
    
    Screen Sharing
  - createOffer
    
    Create SDP Offer
  - createAnswer
    
    Create SDP Answer
  - setLocalDescription
    
    Set Local SDP
  - setRemoteDescription
    
    Set Remote SDP
  - addIceCandidate
    
    Add ICE Candidate
  - onicecandidate
    
    ICE Candidate Event
  - ontrack
    
    Track Event
  - Data Channel
    
    P2P Data Transfer
  - Video Call
    
    Real Time Video
  - STUN Server
    
    NAT Traversal
  - TURN Server
    
    Fallback Relay
  - Signaling Server
    
    Setup Connection
  - Use Cases
    
    Video Conferencing
    
    P2P File Sharing
    
    Live Streaming
HTML5 Performance
- Web Workers
  - Dedicated Worker
    
    Single Page Worker
  - Shared Worker
    
    Multi Page Worker
  - Service Worker
    
    PWA Offline
  - new Worker
    
    Create Worker
  - postMessage
    
    Send Data to Worker
  - onmessage
    
    Receive Data from Worker
  - terminate
    
    Stop Worker
  - Worker Limitations
    
    No DOM Access
    
    No Window Object
    
    Limited API Access
  - Use Cases
    
    Heavy Calculations
    
    Image Processing
    
    Data Parsing
- Performance API
  - performance.now
    
    High Resolution Time
  - performance.mark
    
    Create Performance Mark
  - performance.measure
    
    Measure Between Marks
  - performance.getEntries
    
    Get Performance Entries
  - performance.clearMarks
    
    Clear Marks
  - performance.clearMeasures
    
    Clear Measures
  - performance.clearResourceTimings
    
    Clear Resources
- Resource Timing
  - PerformanceResourceTiming
    
    Resource Load Time
  - initiatorType
    
    Resource Type
  - startTime
    
    Start Time
  - responseEnd
    
    End Time
  - transferSize
    
    Transfer Size
- Navigation Timing
  - PerformanceNavigationTiming
    
    Page Load Metrics
  - domInteractive
    
    DOM Ready
  - domContentLoadedEventEnd
    
    DCL
  - loadEventEnd
    
    Page Fully Loaded
- User Timing
  - measure
    
    User Defined Metrics
  - mark
    
    Custom Markers
- Long Tasks API
  - PerformanceLongTaskTiming
    
    Long Task Detection
  - Task Duration
    
    Blocking Time
  - Use Cases
    
    Responsiveness Issues
- Page Visibility API
  - document.hidden
    
    Page Hidden Check
  - document.visibilityState
    
    Visible Hidden Prerender
  - visibilitychange Event
    
    Tab Switch Detection
  - Use Cases
    
    Pause Video on Tab Switch
    
    Stop Animations
- Resource Hints
  - Preload
    
    <link rel="preload">
  - Prefetch
    
    <link rel="prefetch">
  - Preconnect
    
    <link rel="preconnect">
  - DNS Prefetch
    
    <link rel="dns-prefetch">
  - Prerender
    
    <link rel="prerender">
  - as Attribute
    
    Resource Type
  - crossorigin
    
    CORS Support
  - type Attribute
    
    MIME Type
  - media Attribute
    
    Media Condition
- Lazy Loading
  - loading attribute
    
    lazy eager auto
  - Image Lazy Loading
    
    loading="lazy"
  - Iframe Lazy Loading
    
    loading="lazy"
  - Intersection Observer
    
    JS Implementation
  - Fallback
    
    Legacy Browser Support
- Fetch Priority
  - fetchpriority attribute
    
    high low auto
  - LCP Image Priority
    
    fetchpriority="high"
  - Fetch Priority Use
    
    Critical Resources
HTML5 Security
- Content Security Policy
  - CSP Header
    
    Content-Security-Policy
  - default-src
    
    Fallback Policy
  - script-src
    
    Script Sources
  - style-src
    
    Style Sources
  - img-src
    
    Image Sources
  - connect-src
    
    API Endpoints
  - font-src
    
    Font Sources
  - frame-src
    
    Frame Sources
  - report-uri
    
    Report Violations
  - Nonce
    
    Random Nonce for Inline
  - Hash
    
    Script Hash for Inline
  - Strict Dynamic
    
    Trust Propagation
  - Sandbox
    
    Restrict Capabilities
- CORS
  - Cross Origin Resource Sharing
    
    CORS Header
  - Access-Control-Allow-Origin
    
    Allowed Origins
  - Access-Control-Allow-Methods
    
    Allowed Methods
  - Access-Control-Allow-Headers
    
    Allowed Headers
  - Access-Control-Allow-Credentials
    
    Cookies Support
  - Preflight Request
    
    OPTIONS Method
  - Simple Requests
    
    Allowed Without Preflight
  - CORS Errors
    
    Debugging CORS Issues
- Cross Origin Isolation
  - COOP
    
    Cross Origin Opener Policy
  - COEP
    
    Cross Origin Embedder Policy
  - CORP
    
    Cross Origin Resource Policy
  - SharedArrayBuffer
    
    Requires Isolation
- Iframe Security
  - sandbox Attribute
    
    Restrict Iframe
  - allow Attribute
    
    Feature Permissions
  - allow-scripts
    
    Allow JavaScript
  - allow-same-origin
    
    Same Origin Access
  - allow-forms
    
    Allow Form Submission
  - allow-popups
    
    Allow Popups
  - allow-top-navigation
    
    Top Navigation
  - csp Attribute
    
    Iframe CSP
  - referrerpolicy
    
    Referrer Control
HTML5 Web Components
- Custom Elements
  - define Method
    
    Register Custom Element
  - HTMLElement
    
    Extend HTMLElement
  - Lifecycle Callbacks
    
    connectedCallback disconnectedCallback
  - Attribute Observation
    
    observedAttributes
  - attributeChangedCallback
    
    Attribute Change Handler
  - adoptedCallback
    
    DOM Adoption Handler
  - Customized Built-in Elements
    
    Extend Native Elements
  - Naming Rules
    
    Must Contain Hyphen
  - is Attribute
    
    Is for Built-in
- Shadow DOM
  - attachShadow
    
    Create Shadow Root
  - mode
    
    open vs closed
  - Shadow Host
    
    Parent Element
  - Shadow Root
    
    Root of Shadow Tree
  - Slot Element
    
    Content Projection
  - Named Slots
    
    slot="name"
  - Default Slot
    
    Unnamed Slot
  - Slotted Pseudo Element
    
    ::slotted()
  - Part Attribute
    
    Style from Outside
  - ::part() Pseudo Class
    
    Target Part
- HTML Templates
  - <template> Tag
    
    Inert HTML Content
  - cloneNode
    
    Clone Template Content
  - importNode
    
    Import Node
  - Content Property
    
    Document Fragment
- HTML Slots
  - slot Element
    
    Content Insertion Point
  - slotchange Event
    
    Slot Content Change
  - assignedNodes
    
    Get Assigned Nodes
- Element Internals
  - attachInternals
    
    Attach Internal API
  - setFormValue
    
    Form Integration
  - setValidity
    
    Custom Validation
  - Form Associated
    
    Form Participation
  - ARIA Reflection
    
    Accessibility Properties
- Examples
  - Custom Button
    
    Simple Custom Button
  - Custom Card
    
    Reusable Card Component
  - Custom Tooltip
    
    Tooltip on Hover
  - Custom Rating
    
    Star Rating Component
  - Custom Tabs
    
    Tabs Component
  - Custom Modal
    
    Modal Dialog Component
HTML5 Microdata
- Microdata Introduction
  - Semantic Annotation
    
    Rich Snippets
- Microdata Attributes
  - itemscope
    
    Define Item
  - itemtype
    
    Schema URL
  - itemprop
    
    Property Name
  - itemid
    
    Item Identifier
  - itemref
    
    Reference External
- Schemas
  - Person Schema
    
    Name Job Works For
  - Product Schema
    
    Name Price Description
  - Event Schema
    
    Name Date Location
  - Organization Schema
    
    Name Logo Contact
  - Recipe Schema
    
    Name Ingredients Instructions
  - Review Schema
    
    Item Rating Author
- JSON-LD
  - JSON-LD Format
    
    <script type="application/ld+json">
  - @context
    
    Schema.org URL
  - @type
    
    Schema Type
  - @id
    
    Item ID
  - Benefits
    
    Easy to Implement
- RDFa
  - RDFa Attributes
    
    Alternative to Microdata
  - vocab
    
    Prefix
- Open Graph
  - og:title
    
    Social Media Title
  - og:description
    
    Social Description
  - og:image
    
    Social Thumbnail
  - og:url
    
    Canonical URL
  - og:type
    
    Page Type
- Twitter Cards
  - twitter:card
    
    Card Type
  - twitter:site
    
    Twitter Handle
  - twitter:creator
    
    Author Handle
HTML5 Drag and Drop
- Drag and Drop API
  - draggable Attribute
    
    Make Element Draggable
  - Drag Events
    
    dragstart drag dragend
  - Drop Events
    
    dragenter dragover dragleave drop
  - setData
    
    Store Drag Data
  - getData
    
    Retrieve Drag Data
  - dataTransfer
    
    Data Transfer Object
  - effectAllowed
    
    Copy Move Link
  - dropEffect
    
    Drop Effect
  - setDragImage
    
    Custom Drag Image
  - File Drag and Drop
    
    Drop Files from Desktop
  - Use Cases
    
    Drag Drop Upload
    
    Task Board
HTML5 History API
- History API
  - pushState
    
    Add History Entry
  - replaceState
    
    Replace Current Entry
  - popstate Event
    
    Back Forward Button
  - state
    
    Get State Object
  - back
    
    Go Back
  - forward
    
    Go Forward
  - go
    
    Go to Specific Entry
  - SPA Routing
    
    Single Page App Navigation
  - Use Cases
    
    AJAX Navigation
HTML5 Web Storage
- Local Storage
  - localStorage
    
    Persistent Storage
  - sessionStorage
    
    Temporary Storage
- Web Storage API
  - setItem
    
    Store Item
  - getItem
    
    Get Item
  - removeItem
    
    Remove Item
  - clear
    
    Clear All
  - key
    
    Get Key by Index
  - length
    
    Storage Length
  - Storage Event
    
    Cross Tab Sync
  - JSON Storage
    
    Objects Storage
  - Storage Limit
    
    5-10 MB
HTML5 Conclusion
- HTML5 Summary
  - Complete Coverage
    
    All HTML5 Features
  - Browser Support
    
    Modern Browsers
  - Resources
    
    MDN CanIUse HTML5 Please
  - Next Steps
    
    Learn CSS3 ES6 PWA