Canvas functions

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

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.

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.

Example

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

Canvas.ellipse(obj)

Draws an ellipse.

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.

Example

var myCanvas = Canvas()
myCanvas.fixdot()

Canvas.gabor(obj)

Draws a gabor patch.

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.

Example

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

Canvas.line(obj)

Draws a line.

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.

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.

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.

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.

Example

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