OpenSesame
Rapunzel Code Editor
DataMatrix
Support forum
Python Tutorials
MindProbe
OpenSesame videos
Python videos
Supported by Supported by

Canvas functions

New in OSWeb v1.4

The Canvas class is used to present visual stimuli. You generally create a Canvas object with the Canvas() factory function. Because Canvas() is a function, you do not need to use new when calling it. The JavaScript Canvas class mimicks the corresponding Python Canvas class.

Style keywords can be passed to all functions that accept styleArgs. Style keywords can also be set as properties of the Canvas object. For an overview of style keywords, see the Python Canvas documentation.

Important: JavaScript doesn't support named parameters (or: keywords). Therefore, parameters are passed an Object with named properties and default values. Like so:

var myCanvas = Canvas()
// (correct) pass parameters as an Object ...
myCanvas.fixdot({color: 'red'})
// (incorrect) ... and *not* as named parameters
// myCanvas.fixdot(color='red')
myCanvas.show()

Canvas.arrow(obj)

Draws an arrow. An arrow is a polygon consisting of 7 vertices, with an arrowhead pointing at (ex, ey).

Param Type Default
obj Object
obj.sx Number 0
obj.sy Number 0
obj.ex Number 50
obj.ey Number 0
obj.body_length Number 0.8
obj.body_width Number 0.5
obj.head_width Number 30
..obj.styleArgs Object {}

Example

var myCanvas = Canvas()
var w = vars.width / 2
var h = vars.height / 2
// Important: parameters are passed as an Object
myCanvas.arrow({sx: 0, sy: 0, w: w, h: h, head_width:100, body_length:0.5})

Canvas.clear([styleArgs])

Clears the canvas with the current background color. Note that it is generally faster to use a different canvas for each experimental display than to use a single canvas and repeatedly clear and redraw it.

Param Type Default
[styleArgs] Object {}

Example

var myCanvas = Canvas()
myCanvas.fixdot({color: 'green'})
myCanvas.show()
// do something
myCanvas.clear()
myCanvas.fixdot({color: 'red'})
myCanvas.show()

Canvas.circle(obj)

Draws a circle.

Param Type Default
obj Object
obj.x Number 0
obj.y Number 0
obj.r Number 50
..obj.styleArgs Object {}

Example

var myCanvas = Canvas()
myCanvas.circle({x: 100, y: 100, r: 50, fill: true, color:'red'})

Canvas.ellipse(obj)

Draws an ellipse.

Param Type Default
obj Object
obj.x Number -50
obj.y Number -25
obj.w Number 100
obj.h Number 50
..obj.styleArgs Object {}

Example

var myCanvas = Canvas()
myCanvas.ellipse({x: -10, y: -10, w: 20, h: 20, fill:true})

Canvas.fixdot(obj)

Draws a fixation dot. The default style is medium-open.

  • 'large-filled' is a filled circle with a 16px radius.
  • 'medium-filled' is a filled circle with an 8px radius.
  • 'small-filled' is a filled circle with a 4px radius.
  • 'large-open' is a filled circle with a 16px radius and a 2px hole.
  • 'medium-open' is a filled circle with an 8px radius and a 2px hole.
  • 'small-open' is a filled circle with a 4px radius and a 2px hole.
  • 'large-cross' is 16px cross.
  • 'medium-cross' is an 8px cross.
  • 'small-cross' is a 4px cross.
Param Type Default
obj Object
obj.x Number 0
obj.y Number 0
obj.style String 'default'
..obj.styleArgs Object {}

Example

var myCanvas = Canvas()
myCanvas.fixdot()

Canvas.gabor(obj)

Draws a gabor patch.

Param Type Default
obj Object
obj.x Number 0
obj.y Number 0
obj.orient Number 0
obj.freq Number .1
obj.env String 'gaussian'
obj.size Number 96
obj.stdev Number 12
obj.phase Number 0
obj.col1 String 'white'
obj.col2 String 'black'
obj.bgmode String 'avg'
..obj.styleArgs Object {}

Example

var myCanvas = Canvas()
myCanvas.gabor({x: 100, y: 100, orient: 45, freq: .05})

Canvas.image(obj)

Draws an image from a file in the file pool.

Param Type Default
obj Object
obj.fname String
obj.center Boolean true
obj.x Number 0
obj.y Number 0
obj.scale Number 1
obj.rotation Number 0
..obj.styleArgs Object {}

Example

var myCanvas = Canvas()
myCanvas.image({fname: 'image_in_pool.png'})

Canvas.line(obj)

Draws a line.

Param Type Default
obj Object
obj.sx Number 0
obj.sy Number 0
obj.ex Number 50
obj.ey Number 0
..obj.styleArgs Object {}

Example

var myCanvas = Canvas()
var ex = vars.width / 2
var ey = vars.height / 2
myCanvas.line({sx: 0, sy: 0, ex: ex, ey: ey})

Canvas.noise_patch(obj)

Draws a patch of noise, with an envelope.

Param Type Default
obj Object
obj.x Number 0
obj.y Number 0
obj.env String 'gaussian'
obj.size Number 96
obj.stdev Number 12
obj.col1 String 'white'
obj.col2 String 'black'
obj.bgmode String 'avg'
..obj.styleArgs Object {}

Example

var myCanvas = Canvas()
myCanvas.noise_patch({x: 100, y: 100, env: 'circular'})

Canvas.polygon(obj)

Draws a polygon that defined by a list of vertices. I.e. a shape of points connected by lines.

Param Type Default
obj Object
obj.vertices Array.<Array.<Number>>
..obj.styleArgs Object {}

Example

var myCanvas = Canvas()
var n1 = [0,0]
var n2 = [100, 100]
var n3 = [0, 100]
myCanvas.polygon({vertices: [n1, n2, n3]})

Canvas.rect(obj)

Draws a rectangle.

Param Type Default
obj Object
obj.x Number -50
obj.y Number -25
obj.w Number 100
obj.h Number 50
..obj.styleArgs Object {}

Example

var myCanvas = Canvas()
myCanvas.rect({x: -10, y: -10, w: 20, h: 20, fill:true})

Canvas.show() ⇒ Number

Shows, or 'flips', the canvas on the screen.

Returns: Number - A timestamp of the time at which the canvas appeared on the screen.

Canvas.text(obj)

Draws text.

Param Type Default
obj Object
obj.text String
obj.center Boolean true
obj.x Number 0
obj.y Number 0
..obj.styleArgs Object {}

Example

var myCanvas = Canvas()
myCanvas.text({text: 'Some text'})
Supported by Supported by