Canvas Recording Guide¶

Overview¶

Guance Browser RUM supports recording Canvas 2D frames in Session Replay. Starting from SDK 3.3.7, you can optionally install the WebGL Replay plugin to record WebGL/WebGL2 content.

Canvas 2D recording configuration is available from SDK 3.3.0. WebGL Replay is available from SDK 3.3.7 and requires RUM main package version >= 3.3.7. It is recommended to use the same SDK release version for the WebGL plugin and the RUM main package. The availability of WebGL should not be judged solely by the >= 3.3.0 requirement for Canvas 2D or the general plugins configuration version requirement.

First, the most important point:

Simply configuring replayCanvasEnabled is not enough.

For canvas recording to actually take effect, at least the following prerequisites must be met simultaneously:

• Session Replay sampling is enabled
• That is, sessionReplaySampleRate > 0, or sessionReplayOnErrorSampleRate is hit
• Session Replay recording has started
• That is, startSessionReplayRecording() has been called
• Canvas recording is enabled
• That is, replayCanvasEnabled: true
• The target element on the page is a Canvas 2D; WebGL/WebGL2 also requires registering the WebGL Replay plugin
• If in manual mode, the business code must actively call snapshotCanvas(canvas)

The capability boundaries of the current version are:

• Supports manual trigger of recording
• Supports automatic recording
• Automatic recording supports two official paths:
• snapshot sampling
• higher-fidelity auto recording
• RUM main package directly supports Canvas 2D
• Optional WebGL Replay plugin supports pixel-budgeted snapshots for WebGL/WebGL2
• Recording results enter the Session Replay event stream

The current version does not cover:

• WebGL command-level replay, per-frame video recording
• OffscreenCanvas
• Fully identical reproduction for all complex 2D scenes

Quick Selection¶

Minimal Viable Configurations¶

The following three sets are the current minimal viable configurations. When integrating, it is recommended to copy directly from here and add configurations based on your scenario.

1. Manual Recording: Most Stable, Most Recommended¶

This configuration is suitable for:

• You know when the frame is stable
• You only need to capture a frame at key moments
• You want to keep costs as controllable as possible

datafluxRum.init({
  applicationId: '<YOUR_APPLICATION_ID>',
  datakitOrigin: '<YOUR_DATAKIT_ORIGIN>',
  sessionReplaySampleRate: 100,

  replayCanvasEnabled: true,
  replayCanvasMode: 'manual',
  replayCanvasQuality: 'medium'
})

datafluxRum.startSessionReplayRecording()

Then actively capture frames in the business code:

await datafluxRum.snapshotCanvas(canvasElement)

The truly mandatory explicit configurations in this set are:

• sessionReplaySampleRate
• replayCanvasEnabled

The recommended explicit configurations are:

• replayCanvasMode: 'manual'
• replayCanvasQuality: 'medium'

2. Auto Snapshot: More Conservative Automatic Recording¶

This configuration is suitable for:

• Business logic makes it inconvenient to manually control the timing of frame capture
• You prioritize stability and cost
• You can accept that automatic frame capture is not per-frame recording

datafluxRum.init({
  applicationId: '<YOUR_APPLICATION_ID>',
  datakitOrigin: '<YOUR_DATAKIT_ORIGIN>',
  sessionReplaySampleRate: 100,

  replayCanvasEnabled: true,
  replayCanvasMode: 'auto',
  replayCanvasSampling: 2,
  replayCanvasQuality: 'medium'
})

datafluxRum.startSessionReplayRecording()

The recommended explicit configurations in this set are:

• replayCanvasEnabled: true
• replayCanvasMode: 'auto'
• replayCanvasSampling: 2
• replayCanvasQuality: 'medium'

If you don't explicitly pass replayCanvasSampling, the SDK will still use numeric mode, but it is not recommended to rely on default values for integration documentation; it is best to specify clearly.

3. Auto High-Fidelity Recording¶

This configuration is suitable for:

• You want auto mode to be closer to the actual drawing process
• The page primarily uses 2D canvas
• You can accept automatic fallback to snapshot in complex scenarios

datafluxRum.init({
  applicationId: '<YOUR_APPLICATION_ID>',
  datakitOrigin: '<YOUR_DATAKIT_ORIGIN>',
  sessionReplaySampleRate: 100,

  replayCanvasEnabled: true,
  replayCanvasMode: 'auto',
  replayCanvasSampling: 'all',
  replayCanvasQuality: 'medium'
})

datafluxRum.startSessionReplayRecording()

The mandatory explicit configurations in this set are:

• replayCanvasEnabled: true
• replayCanvasMode: 'auto'
• replayCanvasSampling: 'all'

WebGL/WebGL2 Plugin Integration¶

The WebGL implementation is not included in the RUM main package. Normal DOM and Canvas 2D replay do not require installing the plugin; only applications that need WebGL/WebGL2 replay should introduce it additionally. The RUM main package version must be >= 3.3.7, and it is recommended to use the same SDK release version for the plugin and the main package.

The WebGL plugin only collects when replayCanvasEnabled: true and replayCanvasMode: 'auto'. It records pixel-budgeted snapshots at drawing boundaries, not WebGL command replay, nor per-frame video.

NPM¶

npm install @cloudcare/browser-rum @cloudcare/browser-rum-webgl

import { datafluxRum } from '@cloudcare/browser-rum'
import { webglReplayPlugin } from '@cloudcare/browser-rum-webgl'

datafluxRum.init({
  applicationId: '<YOUR_APPLICATION_ID>',
  datakitOrigin: '<YOUR_DATAKIT_ORIGIN>',
  sessionReplaySampleRate: 100,
  replayCanvasEnabled: true,
  replayCanvasMode: 'auto',
  replayCanvasSampling: 2,
  replayCanvasAutoInterval: 1000,
  replayCanvasQuality: 'medium',
  plugins: [webglReplayPlugin()]
})

datafluxRum.startSessionReplayRecording()
startWebGLEngine()

CDN¶

Both scripts must be loaded before DATAFLUX_RUM.init():

<script src="https://static.guance.com/browser-sdk/v3/dataflux-rum.js"></script>
<script src="https://static.guance.com/browser-sdk/v3/dataflux-rum-webgl.js"></script>
<script>
  DATAFLUX_RUM.init({
    applicationId: '<YOUR_APPLICATION_ID>',
    datakitOrigin: '<YOUR_DATAKIT_ORIGIN>',
    sessionReplaySampleRate: 100,
    replayCanvasEnabled: true,
    replayCanvasMode: 'auto',
    replayCanvasSampling: 2,
    replayCanvasAutoInterval: 1000,
    replayCanvasQuality: 'medium',
    plugins: [DATAFLUX_RUM_WEBGL.webglReplayPlugin()]
  })

  DATAFLUX_RUM.startSessionReplayRecording()
  startWebGLEngine()
</script>

If the plugin initialization fails or the browser does not support the required capabilities, only WebGL collection is disabled; normal DOM, Canvas 2D, and other RUM data continue to be collected.

What Must Be Configured¶

If your goal is simply "to get canvas recording running", the minimum parameters to care about are:

Mandatory Prerequisites¶

• sessionReplaySampleRate
• Must ensure replay is sampled, otherwise canvas recording will not take effect
• startSessionReplayRecording()
• init() alone is not enough; you must actually start replay recording
• replayCanvasEnabled: true
• Without this, canvas recording is completely disabled

Mandatory for Manual Mode¶

• replayCanvasEnabled: true
• It is recommended to explicitly set replayCanvasMode: 'manual'
• Business code must call snapshotCanvas(canvas)

Mandatory for Auto Mode¶

• replayCanvasEnabled: true
• replayCanvasMode: 'auto'
• It is recommended to explicitly set replayCanvasSampling
• Numeric value: auto snapshot
• 'all': higher-fidelity auto recording

When to Configure replayCanvasWorkerUrl¶

This parameter is not a "feature toggle" but a deployment parameter.

Only configure it in these scenarios:

• The site CSP does not allow worker-src blob:
• You want to host the canvas snapshot encoding worker separately
• You explicitly want canvas encoding to not use inline blob worker

Typical usage:

datafluxRum.init({
  // ...
  replayCanvasEnabled: true,
  replayCanvasMode: 'auto',
  replayCanvasSampling: 2,
  replayCanvasWorkerUrl: '/canvas-worker.js'
})

Note:

• replayCanvasWorkerUrl only affects canvas snapshot encoding
• It does not replace the original workerUrl
• If the current frame does not go through snapshot encoding, the canvas worker will not be used

Mode Differences¶

manual¶

Characteristics:

• The business logic decides when to capture frames
• Does not deduplicate repeated frames
• Best suited for "capturing a frame at key moments"

Suitable for:

• Chart rendering completion
• Game settlement screen
• Whiteboard save
• Final frame after animation ends

auto¶

Characteristics:

• SDK automatically captures frames
• The specific capture method is determined by replayCanvasSampling
• Recording pauses when the page goes to the background and resumes when it comes back to the foreground
• You can use shouldRecordCanvas() to return a numeric priority, allowing key canvases to be recorded first

The formal semantics of replayCanvasSampling:

• Positive number (recommended starting from 2): selects the auto snapshot path. For Canvas 2D, the numeric value itself does not control the capture frequency.
• 'all': higher-fidelity auto recording, aiming to preserve the drawing process as much as possible; may still automatically fall back to snapshot in complex scenarios.

The capture cadence of auto snapshot is controlled by replayCanvasAutoInterval, cooldown, and backoff configurations. The WebGL plugin is also subject to these budget constraints; even with 'all', WebGL still uses pixel snapshots; 'all' only allows Canvas 2D to attempt command capture.

Simple selection advice:

• If unsure how to configure: start with replayCanvasSampling: 2
• If cost is more important: increase replayCanvasAutoInterval
• If snapshot continuity is more important: gradually decrease replayCanvasAutoInterval
• If Canvas 2D drawing fidelity is more important: evaluate whether 'all' is needed
• Only use 'all' if you explicitly accept higher complexity and higher data costs

Suitable for:

• Business logic makes it inconvenient to manually control frame capture timing
• The page has a small to moderate number of 2D canvases
• You want to balance cost and fidelity
• In a multi-chart page, you only need to prioritize recording the main chart

Use Cases¶

Suitable for these scenarios:

• The business logic knows when the frame is stable
• You need to manually capture a canvas frame after a key operation
• You need Session Replay to reproduce some 2D canvas visual results

Not suitable for these scenarios:

• Per-frame recording of high-frequency animations
• Video-like replay requiring strict reproduction of every frame
• Scenarios relying on OffscreenCanvas or WebGL command-level reproduction

Enabling¶

NPM¶

import { datafluxRum } from '@cloudcare/browser-rum'

datafluxRum.init({
  applicationId: '<YOUR_APPLICATION_ID>',
  datakitOrigin: '<YOUR_DATAKIT_ORIGIN>',
  service: 'browser',
  env: 'production',
  version: '1.0.0',
  sessionSampleRate: 100,
  sessionReplaySampleRate: 100,
  trackUserInteractions: true,

  replayCanvasEnabled: true,
  replayCanvasMode: 'manual',
  replayCanvasQuality: 'medium'
})

datafluxRum.startSessionReplayRecording()

CDN¶

<script
  src="https://static.guance.com/browser-sdk/v3/dataflux-rum.js"
  type="text/javascript"
></script>
<script>
  window.DATAFLUX_RUM &&
    window.DATAFLUX_RUM.init({
      applicationId: '<YOUR_APPLICATION_ID>',
      datakitOrigin: '<YOUR_DATAKIT_ORIGIN>',
      service: 'browser',
      env: 'production',
      version: '1.0.0',
      sessionSampleRate: 100,
      sessionReplaySampleRate: 100,
      trackUserInteractions: true,

      replayCanvasEnabled: true,
      replayCanvasMode: 'manual',
      replayCanvasQuality: 'medium'
    })

  window.DATAFLUX_RUM && window.DATAFLUX_RUM.startSessionReplayRecording()
</script>

Configuration Reference¶

For daily integration, focus on the following 6 configurations:

• replayCanvasEnabled
• replayCanvasMode
• replayCanvasSampling
• replayCanvasQuality
• replayCanvasAutoInterval
• shouldRecordCanvas

Other parameters are advanced overrides. Only adjust them after confirming that the default strategy is not suitable for the current page.

replayCanvasEnabled¶

• Type: boolean
• Default: false

Whether to enable canvas recording capability.

It is recommended to always explicitly configure this. When disabled by default, it does not affect existing normal Session Replay logic.

replayCanvasMode¶

• Type: string
• Currently supported: 'manual' | 'auto'
• Default: 'auto'

Specifies the canvas recording mode.

• manual: The business code actively calls snapshotCanvas() at an appropriate time
• auto: The SDK automatically captures frames, with the specific strategy determined by replayCanvasSampling

replayCanvasSampling¶

• Type: number | 'all'
• Default: numeric mode

Specifies the canvas recording strategy in auto mode.

• Numeric value: uses snapshot sampling
• 'all': uses higher-fidelity auto recording

Recommendations:

• If the goal is stability and conservatism: prefer numeric mode
• If the goal is to be closer to the actual drawing process: use 'all'

Note:

• 'all' does not mean that all scenarios will be recorded with the high-fidelity path
• For some complex scenarios, the SDK automatically falls back to snapshot
• The numeric value itself does not control the capture frequency of Canvas 2D; use replayCanvasAutoInterval and cooldown/backoff configurations to adjust cadence
• WebGL always uses the plugin's pixel snapshot path and does not enter 2D command capture

replayCanvasQuality¶

• Type: 'low' | 'medium' | 'high' | number
• Default: 0.4

Canvas snapshot encoding quality.

String presets adjust both encoding quality and auto collection budget, not just image quality:

When low, medium, or high is not used, the "No String Preset" column in the table represents the runtime baseline defaults. When an independent configuration is explicitly passed, it overrides the corresponding value in the preset. For example, with replayCanvasQuality: 'medium' and replayCanvasAutoCooldown: 800, only cooldown uses 800 ms, while other items still use the medium values.

For Canvas 2D, replayCanvasAutoUnchangedBackoff represents the window between two complete encoding checks when the signature remains unchanged. Within this window, a bounded 24x24 lightweight signature probe is still performed, gradually backing off to approximately 1000 ms. Once a change is detected, the target cadence is immediately restored, rather than waiting for the full check window to end. WebGL continues to use an independent and more conservative GPU readback cadence.

replayCanvasAutoInterval represents the target capture interval for each Canvas, not a fixed scan period for the entire page. Multiple canvases are fairly rotated, and are still subject to per-round quantity, concurrency, and global collection budget limits; therefore, the actual frequency of a single canvas in a complex dashboard may be lower than the target value. The default global upper limit is approximately 16.7 snapshot attempts per second, to prevent linear growth of main thread and upload pressure with the number of canvases.

The interval/cooldown in the table above are the baseline for Canvas 2D auto snapshot. The WebGL plugin needs to synchronously read GPU pixels; when not explicitly configured, it continues to use a more conservative cadence: default 1000/1000 ms, low = 1500/3000 ms, medium = 1000/2000 ms, high = 700/1400 ms. Explicit interval/cooldown will override the WebGL strategy respectively, to avoid automatically amplifying readPixels costs when improving 2D continuity.

If you only want to change image encoding quality without changing the sampling and scheduling budget, pass a number between 0 and 1, for example replayCanvasQuality: 0.4. Under replayCanvasSampling: 'all', command frames themselves do not use image encoding, but fallback snapshots will still use the quality configuration here.

The higher the value or preset:

• The higher the image quality
• The larger the size typically
• The greater the pressure on replay segments

It is recommended to start with medium.

How to Record¶

API¶

Current external API:

DATAFLUX_RUM.snapshotCanvas(canvasElement)

Or NPM:

datafluxRum.snapshotCanvas(canvasElement)

The return value is a Promise that resolves to:

{ ok: true }

or:

{ ok: false, reason: '...' }

Currently possible reason values include:

• not_recording
• replay_disabled
• invalid_mode
• not_canvas
• not_serialized
• detached
• rejected_by_should_record_canvas
• encode_too_large
• unchanged
• encode_failed
• observer_stopped

Minimal Example¶

const canvas = document.getElementById('my-canvas')
const ctx = canvas.getContext('2d')

ctx.fillStyle = '#2563eb'
ctx.fillRect(20, 20, 160, 80)
ctx.fillStyle = '#0f172a'
ctx.font = '20px sans-serif'
ctx.fillText('Canvas Replay', 210, 70)

window.DATAFLUX_RUM &&
  window.DATAFLUX_RUM.snapshotCanvas(canvas).then((result) => {
    if (!result.ok) {
      console.warn('snapshotCanvas failed:', result.reason)
    }
  })

Recommended Call Timing¶

It is recommended to call snapshotCanvas at the following times:

• After a single drawing operation is complete
• After a set of animations ends
• After the user completes a key interaction

Not recommended:

• Calling on every frame
• Calling in high-frequency timers
• Performing a large number of batch calls outside of page idle time

Recording Prerequisites¶

For a canvas snapshot to actually enter the replay, all of the following must be met:

• init() has been called
• startSessionReplayRecording() has been called
• replayCanvasEnabled = true
• replayCanvasMode = 'manual' or 'auto'
• The input is an HTMLCanvasElement
• The node is already in the current DOM snapshot
• The node is still in the document
• The encoded result does not exceed the size limit

If any of these conditions are not met, the snapshot will fail or be skipped.

shouldRecordCanvas Usage¶

shouldRecordCanvas(canvas) can now control both "whether to record" and the priority in auto mode.

Return value rules:

• Return false: do not record this canvas
• Return a number: used as the priority in auto mode; higher numbers get higher priority
• Return true, undefined, or other non-numeric truthy value: use default priority 0

Example:

datafluxRum.init({
  replayCanvasEnabled: true,
  replayCanvasMode: 'auto',
  replayCanvasQuality: 'medium',
  shouldRecordCanvas(canvas) {
    if (canvas.dataset.replay === 'off') {
      return false
    }

    if (canvas.dataset.chartRole === 'primary') {
      return 10
    }

    if (canvas.dataset.chartRole === 'secondary') {
      return 5
    }

    return 0
  }
})

This is useful for dashboards:

• Record the main chart first
• Continue recording secondary charts when budget allows
• Exclude irrelevant small charts or thumbnails

Advanced Overrides¶

If the default strategy is insufficient, consider these low-level parameters:

• replayCanvasMimeType Encoding format, default image/webp
• replayCanvasMaxCanvasSize Maximum allowed side length before encoding, default 1280
• replayCanvasMaxEncodedBytes Maximum number of bytes allowed per frame into replay, default 40000
• replayCanvasMaxConcurrentEncodes Maximum concurrent encoding limit, default 1
• replayCanvasFlushImmediately Whether to flush immediately after successfully entering replay; manual default true, auto default false

Only consider adjusting these items in the following scenarios:

• The number of canvases on the page significantly exceeds the default budget
• Single frame size is too large, requiring compression of dimensions or bytes
• You have confirmed through debug results that the current cadence is too slow or too fast

Demo Debug Panel¶

The local demo in this repository includes a canvas debug panel to help observe the current recording pipeline:

• mode: The canvas recording mode used by the current demo
• auto policy: The interval / cooldown / unchanged backoff / failure backoff / max per run passed during demo initialization
• auto draw: The demo's own continuous redraw toggle, used only to create frame changes
• last trigger: The source of the most recent manual snapshotCanvas() call
• last snapshot: The result of the most recent manual snapshotCanvas()
• last reason: The reason for the most recent failure
• auto result: The policy result derived from the current configuration
• last event: The most recent event status recorded by the demo side

The current demo also provides two auxiliary capabilities:

• toggle auto draw: Periodically redraws the canvas, useful for observing whether changes are continuously generated in auto mode
• export last canvas event: Exports a debug event corresponding to the most recent successful manual snapshot

Note:

• auto draw is a demo behavior, not the SDK's internal auto sampler
• auto result is currently a policy mapping based on the manual snapshotCanvas() result, primarily for debugging illustration
• It is not yet directly connected to the SDK's internal auto timed sampling results
• The exported event is also a debug sample reconstructed by the demo side based on the current canvas content, not read back from the intake payload

Performance Recommendations¶

Canvas recording is a high-cost capability and should be used conservatively.

Recommended practices:

• Only call snapshotCanvas() at critical moments
• Control canvas dimensions
• Prefer using replayCanvasQuality: 'low' | 'medium' | 'high'
• Keep replayCanvasMaxConcurrentEncodes = 1
• In auto mode, prioritize letting the quality preset determine the default budget
• For dashboard pages, prefer using shouldRecordCanvas() for key chart selection and priority sorting

Not recommended:

• Performing per-frame snapshots of high-frequency animations; for WebGL, start with a larger replayCanvasAutoInterval and then adjust based on replay continuity and page performance
• Frequent calls on very large canvases
• Treating canvas recording as the default path

Privacy Notes¶

Important:

• Canvas pixel content is not automatically protected by normal DOM masking

That is:

• Text node, form node, and attribute sanitization rules do not automatically apply to canvas pixels
• If sensitive information is drawn on the canvas, it may be reproduced in the replay after recording

Therefore, it is recommended:

• Only enable recording for canvases that are safe for public replay
• Do not call snapshotCanvas() on canvases containing sensitive content such as account numbers, phone numbers, or payment information

FAQ¶

1. Why is the frame not visible in replay after calling snapshotCanvas()?¶

Priority checks:

• Is replayCanvasEnabled enabled?
• Has session replay recording been started?
• Is the input a canvas element?
• Is the snapshot called after the canvas drawing is complete?
• Was the snapshot discarded due to size exceeding the limit?

2. Why is auto mode not per-frame recording?¶

The current version supports auto recording, but it is not "per-frame video".

The reasons are:

• Snapshot sampling is essentially still sampling
• Higher-fidelity auto recording, while closer to actual drawing, is still subject to complex scene boundaries and automatic fallback constraints
• Canvas encoding and upload costs are still significantly higher than normal DOM replay
• WebGL uses an optional plugin with pixel-budgeted snapshots, which also does not perform per-frame recording

Therefore, the design goals of the current auto mode are:

• Capture key visual states at a lower cost
• Balance fidelity and cost
• Not turn Session Replay into video recording

3. Why is there no WebGL frame?¶

Priority checks:

• Is the RUM main package version 3.3.7 or higher, and has a compatible WebGL Replay plugin been additionally installed or loaded? It is recommended to use the same SDK release version for the plugin and the main package.
• Is webglReplayPlugin() included in plugins?
• Are both replayCanvasEnabled: true and replayCanvasMode: 'auto' enabled?
• Did the plugin/RUM init() occur before the WebGL engine was loaded and the context created?
• Is the frame continuing to produce real draws after the observer started?

The first safe frame for WebGL comes from the next real draw after the observer starts. The plugin does not asynchronously read the default framebuffer after drawing has finished, nor does it fall back to the normal Canvas 2D snapshot path.

4. Is canvas recording uploaded separately?¶

No.

In the current version, canvas snapshots are encoded as part of the replay event and share the same upload pipeline as normal replay.

5. Why are some charts in the dashboard page recorded while others are not?¶

Such pages often have many canvas charts simultaneously. When "some charts are not recorded", the most common reason is not a single chart error, but:

• Auto mode may not record all charts in every round
• Too many charts on the same screen, exceeding the auto recording budget
• Some charts finished their initial draw too early and have not been redrawn since
• Some complex charts fall back to snapshot in auto high-fidelity mode, which is more expensive

Priority recommendations:

1. If the core requirement is "minimize missed charts", prefer using:

replayCanvasEnabled: true,
replayCanvasMode: 'auto',
replayCanvasSampling: 'all'

1. For key charts on the first screen, manually capture a frame after chart rendering is complete:

await datafluxRum.snapshotCanvas(canvas)

1. Let auto mode handle non-critical charts

2. Use shouldRecordCanvas() to increase the priority of key charts, or skip unimportant small charts:

shouldRecordCanvas(canvas) {
  if (canvas.dataset.miniChart === 'true') {
    return false
  }

  if (canvas.id === 'main-trend' || canvas.id === 'conversion-funnel') {
    return 10
  }

  return 1
}

If you value stability and cost more than full coverage:

• Keep replayCanvasSampling: 2
• Only manually call snapshotCanvas(canvas) for key charts

If you value coverage more:

• Try replayCanvasSampling: 'all'
• Supplement with manual snapshots for key charts

Simply put:

• Auto mode is responsible for "recording as much as possible"
• Manual snapshotCanvas(canvas) is responsible for "ensuring key charts are definitely recorded"

Example Scenarios¶

Business scenarios suitable for direct integration:

• Record once after chart rendering is complete
• Record once when a level is completed
• Record once before saving a whiteboard
• Record once after signature confirmation

A more complete example:

function drawInvoicePreview(canvas, data) {
  const ctx = canvas.getContext('2d')
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = '#fff'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = '#111827'
  ctx.font = '18px sans-serif'
  ctx.fillText('Invoice Preview', 24, 36)
  ctx.fillText('Order: ' + data.orderNo, 24, 72)
  ctx.fillText('Amount: ' + data.amount, 24, 108)
}

function refreshPreview(canvas, data) {
  drawInvoicePreview(canvas, data)
  window.DATAFLUX_RUM &&
    window.DATAFLUX_RUM.snapshotCanvas(canvas)
}

Dashboard scenario example:

datafluxRum.init({
  replayCanvasEnabled: true,
  replayCanvasMode: 'auto',
  replayCanvasSampling: 2,
  replayCanvasQuality: 'medium',
  shouldRecordCanvas(canvas) {
    if (canvas.dataset.miniChart === 'true') {
      return false
    }

    if (canvas.id === 'main-trend' || canvas.id === 'conversion-funnel') {
      return 10
    }

    return 1
  }
})

The semantics of this configuration are:

• Skip small auxiliary charts
• Prioritize recording the main trend chart and core funnel chart
• Other normal charts are sampled in rotation under the same priority

Recommendations¶

The recommended usage for the current version is summarized in one sentence:

• Treat canvas recording as "capturing key visual state frames", not as "continuous video recording"

If the business timing is clear, prefer manual; for multi-chart scenarios like dashboards, cautiously enable auto and explicitly choose numeric sampling or 'all'.