{{ store.width }} x {{ store.height }}

Offscreen rendering.

{{ item.title }}

{{ definition.value }}

In this example, there is no Stage.canvas applied (initially).

Instead an OffscreenCanvas canvas is created on mount() stage, replacing the inner stage.ctx with the offscreen alternative.

The draw(ctx) context entity is the offscreen canvas layer. Once everything is complete, we call copyToOnScreen(offscreenCanvas, onScreenCanvas) to push the content into something visible.

Fundamentally the stage works in the same manner, as with a standard canvas, The only change is the final copyToOnScreen call.

Meta Data
title Offscreen rendering.
imports ()
files ('../point_src/core/head.js', '../point_src/pointpen.js', '../point_src/pointdraw.js', '../point_src/math.js', '../point_src/extras.js', '../point_src/point-content.js', '../point_src/pointlist.js', '../point_src/pointlistpen.js', '../point_src/point.js', '../point_src/stage.js', '../point_src/offscreen.js', 'mouse', 'dragging', 'stroke')
unused_keys ()
unknown_keys ('category',)
category ['offscreen']
filepath_exists True
path offscreen-example-c
filepath offscreen-example-c.js
clean_files ('../point_src/core/head.js', '../point_src/pointpen.js', '../point_src/pointdraw.js', '../point_src/math.js', '../point_src/extras.js', '../point_src/compass.js', '../point_src/center.js', '../point_src/point-content.js', '../point_src/pointlistdraw.js', '../point_src/pointlistgradient.js', '../point_src/pointlistshape.js', '../point_src/pointlistgenerator.js', '../point_src/unpack.js', '../point_src/pointlist.js', '../point_src/pointlistpen.js', '../point_src/relative-xy.js', '../point_src/pointcast.js', '../point_src/point.js', '../point_src/stage-resize.js', '../point_src/functions/resolve.js', '../point_src/stage.js', '../point_src/offscreen.js', '../point_src/events.js', '../point_src/automouse.js', '../point_src/functions/clamp.js', '../point_src/distances.js', '../point_src/protractor.js', '../point_src/text/beta.js', '../point_src/dragging.js', '../point_src/setunset.js', '../point_src/stroke.js')
Logger Install Logger {{ store.words }}
{{ store.errorText.message }}
{{ store.errorText.stackText }}