The WebGL Computational Library
Documentation Installation Textures Texture Float32Texture Int32Texture Uint32Texture ImageTexture CanvasTexture TableTexture copyTexture Solvers Solver Copy setUniformInSolvers setUniformsInSolvers SignalPlot Plot1D Plot2D Tvsx VolumeRayCaster getColormapList Probe TextureReader ProbeRecorder IntervalCaller saveCanvas APD OrbitalCameraControl MouseListener ClickListener DoubleClickListener CtrlClickListener ShiftClickListener CommandClickListener CtrlShiftClickListener ShiftCtrlClickListener LongClickListener Storage saveToXML loadFromXML xorwow random Gui Editor glMatrix

CanvasTexture (class)

Creates a Float32Texture from what is currently displayed on a JavaScript canvas object. The color channels will be normalized to be between 0 and 1.


The constructor can be called as

var textureInstance = new Abubu.CanvasTexture(canvas, options) ;

The arguments are:

  1. canvas

    canvas object to be used as initial data for the texture. The texture size will match the canvas' size.

  2. options

    object of optional named arguments. If none is provided, the default values will be assumed. The options object's available properties are:

    • wrapS

      String indicating wrapping in the horizontal direction. Possible values are

         'clamp_to_edge'   (default)
    • wrapT

      String indicating wrapping in the vertical direction. Possible values are

         'clamp_to_edge'   (default)
    • magFilter

      Texture magnification filter. Possible values are

         'nearest'         (default)
    • minFilter

      Texture minification filter. Possible values are

         'nearest'         (default)

Instance properties

The following properties have read and write permissions and hence can be modified.

\(^\dagger \)By changing this properties, the underlying canvas size will also change.

For more information on these properties, see the explanations in the constructor section.

Instance methods


The .update() method can be called on the instance of the object to update the texture values based on the data that is currently displayed on the canvas. This is useful, if we the canvas display has changed since creation of the instance, and the data in the texture needs to reflect the current changes.


Consider the following HTML body:

<body onload='loadWebGL();'>
   <canvas id='myCanvas' width=512 height=512>
      The page doesn't support canvas!

We can define an CanvasTexture based on the canvas element on the page by the following JavaScript code.

function loadWebGL(){
   var canvas = document.getElementById('myCanvas') ;

   var canvasTexture = new Abubu.CanvasTexture(canvas,{
      wrapS : 'repeat' ,
      wrapT : 'mirrored_repeat' ,
   } ) ;

   return ;

The above code, creates a new Float32Texture based on the initial data on the canvas with the id 'myCanvas'. The wrapping in the S direction is set to 'repeat', while the wrapping in T direction is set to 'mirrored_repeat'.