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.

Constructor

The constructor can be called as

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

The arguments are:

canvas

canvas object to be used as initial data for the texture. The texture size will match the canvas' size.
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)
   'repeat'
   'mirrored_repeat' 
```
- wrapT
  
  String indicating wrapping in the vertical direction. Possible values are
```
   'clamp_to_edge'   (default)
   'repeat'
   'mirrored_repeat' 
```
- magFilter
  
  Texture magnification filter. Possible values are
```
   'nearest'         (default)
   'linear'
```
- minFilter
  
  Texture minification filter. Possible values are
```
   'nearest'         (default)
   'linear'
   'nearest_mipmap_nearest'
   'linear_mipmap_nearest'
   'nearest_mipmap_linear'
   'linear_mipmap_linear'
```

Instance properties

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

width\(^\dagger \)
height\(^\dagger \)
wrapS
wrapT
minFilter
magFilter

\(^\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

update()

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.

Example

Consider the following HTML body:

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

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'.