Welcome to Highlight
Getting Started
Overview
Backend SDK
Overview
Express Backend
Go Backend
Next.js Backend
Node.js Backend
Client SDK
Angular
Overview
Gatsby.js
HTML
Next.js
Other
React.js
Shopify
Squarespace
SvelteKit
Vue.js
Webflow
WordPress
Next.js SDK
Highlight()
Metrics
nope
Overview
withHighlightConfig()
Tips
Content-Security-Policy
Local Development
Monkey Patches
Performance Impact
Proxying Highlight
Session Search Deep Linking
Troubleshooting
Upgrading Highlight
Session Replay
Console Messages
HTML iframe Recording
Identifying Users
Live Mode
Network DevTools
Privacy
Rage Clicks
Recording Network Requests and Responses
Session Sharing
Session Shortcut
Tracking Events
Versioning Sessions
Error Monitoring
Grouping Errors
Sourcemaps
Versioning Errors
Product Features
Alerts
Analytics
Canvas
Comments
Environments
Frontend Observability
Keyboard Shortcuts
Performance Data
Segments
Session Search
Team Management
User Feedback
Web Vitals
WebGL
Integrations
Amplitude Integration
Clearbit Integration
Electron Integration
Front Plugin
Intercom Integration
Linear Integration
Mixpanel Integration
React.js Integration
Segment Integration
Sentry Integration
Slack Integration
Vercel Integration
highlight.run Changelog
5.0.0
Menu
Docs / Product Features / Canvas

Canvas

We are actively working on improving recording of canvas elements. If you have any questions or suggestions please reach out to us at support@highlight.run

Highlight by default does not record the contents of <canvas> elements. This is usually why the session replay has blank areas where those areas should be <canvas> elements. We provide experimental recording of <canvas> contents.

Ensure you have installed highlight.run >= 4.3.6. Enable canvas recording by configuring H.init().

H.init('YOUR_PROJECT_ID', { enableCanvasRecording: true, samplingStrategy: { canvas: 15, canvasQuality: 'low', canvasMaxSnapshotDimension: 480, }, })
Copy

samplingStrategy.canvas is the frame per second rate used to record the HTML canvas. We recommend a value < 5 to ensure recording performance is not impacted at high resolutions.

samplingStrategy.canvasQuality: 'pixelated' | 'low' | 'medium' | 'high'. This value represents the image compression quality and will affect the size of the canvas images uploaded.

samplingStrategy.canvasMaxSnapshotDimension: max recording resolution of the largest dimension of the canvas.

Snapshotting at full resolution and high FPS can produce too much data for our client to upload on devices with low upload bandwidth. We've found that with a safe assumption of upload speed @, 1 MB/s I can support the above snapshotting settings without a problem at 480p 15 fps.

Even though this feature is experimental, it should not have any impact on your application. We've recently changed our uploading client to use browser web-workers to ensure that data serialization cannot block the rendering of your application. If you run into any issues please let us know!

Caveats
  • Privacy controls do not apply to canvas recording right now