Skip to content

CanvasNode

Overview

An abstract node (should be subtyped) that is drawn by user-provided custom Canvas code.

The region that can be drawn in is handled manually, by controlling the canvasBounds property of this CanvasNode. Any regions outside of the canvasBounds will not be guaranteed to be drawn. This can be set with canvasBounds in the constructor, or later with node.canvasBounds = bounds or setCanvasBounds( bounds ).

@author Jonathan Olson <jonathan.olson@colorado.edu>

Class CanvasNode

import { CanvasNode } from 'scenerystack/scenery';

Constructor

new CanvasNode( options? : CanvasNodeOptions )

Instance Methods

setCanvasBounds( selfBounds : Bounds2 )

Sets the bounds that are used for layout/repainting.

These bounds should always cover at least the area where the CanvasNode will draw in. If this is violated, this node may be partially or completely invisible in Scenery's output.

getCanvasBounds() : Bounds2

Returns the previously-set canvasBounds, or Bounds2.NOTHING if it has not been set yet.

isPainted() : boolean

Whether this Node itself is painted (displays something itself).

paintCanvas( context : CanvasRenderingContext2D )

Override paintCanvas with a faster version, since fillRect and drawRect don't affect the current default path.

IMPORTANT NOTE: This function will be run from inside Scenery's Display.updateDisplay(), so it should not modify or mutate any Scenery nodes (particularly anything that would cause something to be marked as needing a repaint). Ideally, this function should have no outside effects other than painting to the Canvas provided.

invalidatePaint()

Should be called when this node needs to be repainted. When not called, Scenery assumes that this node does NOT need to be repainted (although Scenery may repaint it due to other nodes needing to be repainted).

This sets a "dirty" flag, so that it will be repainted the next time it would be displayed.

canvasPaintSelf( wrapper : CanvasContextWrapper, matrix : Matrix3 )

(protected)

Draws the current Node's self representation, assuming the wrapper's Canvas context is already in the local coordinate frame of this node.

@param wrapper @param matrix - The transformation matrix already applied to the context.

containsPointSelf( point : Vector2 ) : boolean

Computes whether the provided point is "inside" (contained) in this Node's self content, or "outside".

If CanvasNode subtypes want to support being picked or hit-tested, it should override this function.

@param point - Considered to be in the local coordinate frame

getSelfShape() : Shape

Returns a Shape that represents the area covered by containsPointSelf.

mutate( options? : CanvasNodeOptions ) : this

Type CanvasNodeOptions

import type { CanvasNodeOptions } from 'scenerystack/scenery';

Source Code

See the source for CanvasNode.ts in the scenery repository.