Class myphysicslab.lab.view.LabCanvas

Provided By
All Implemented Interfaces

Manages an HTML canvas and contains a list of myphysicslab.lab.view.LabViews which are drawn into the canvas. The LabViews are drawn overlapping so that the last LabView appears on top of the others.

Canvas Size and Shape

The HTML canvas has a specified width and height, which determines its resolution and shape. The size can be changed via #setWidth, #setHeight, or #setSize. When the size of the HTML canvas changes, the LabViews are set to have the same screen rectangle as the canvas.

Each LabView has a simulation rectangle which is placed over its screen rectangle via a myphysicslab.lab.view.CoordMap. The simulation rectangle specifies the simulation coordinates, and the CoordMap translates simulation coordinates to screen coordinates. Pan and zoom can be accomplished by changing the simulation rectangle of a LabView (which changes its CoordMap accordingly).

Focus View

The first LabView that is added becomes the focus view. The focus view is treated specially by some classes, for example will pan the focus LabView when a particular set of modifier keys are pressed during a mouse drag. The focus view can be changed via #setFocusView.

Background Color

Whenever #paint is called to draw a new frame, the first step is to clear the old frame from the HTML canvas.

  • If no background color is specified (an empty string) then we use the JavaScript canvas.clearRect() method which clears to transparent black pixels.

  • If a background color is specified, then we use JavaScript canvas.fillRect() to fill the HTML canvas with that color.

The background color can be set with #setBackground.

Trails Effect

A visual effect where moving objects leave behind a smeared out trail can be done by setting the background color and the alpha transparency, see #setAlpha. Here are example settings, which can be done in a myphysicslab.lab.util.Terminal session:


When alpha is 1.0 then there is no trails effect because the old frame is entirely painted over with an opaque color.

The trails effect happens when alpha is less than 1 because we paint a translucent rectangle over the old frame, which gradually makes the old image disappear after several iterations of painting.

Parameters Created

  • ParameterNumber named LabCanvas.en.WIDTH see #setWidth

  • ParameterNumber named LabCanvas.en.HEIGHT see #setHeight

Events Broadcast

LabCanvas broadcasts these myphysicslab.lab.util.GenericEvents to its Observers:

new LabCanvas( canvas, name )


the HTML canvas to manage


name of this LabCanvas

Instance Methods

Static Properties

Type Definitions