new Canvas(width, height, presetopt, rendereropt, optionsopt)
p5play adds some extra functionality to the `createCanvas`
function. See the examples below.
This function also disables the default keydown responses for
the arrow keys, slash, and space. This is to prevent the
browser from scrolling the page when the user is playing a game
using common keyboard commands.
Supports p5.js' '2d' and 'webgl' renderers.
Only q5.js has support for canvas options (context attributes).
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
width |
Number
|
||
height |
Number
|
||
preset |
String
|
<optional> |
'fullscreen' or 'pixelated' |
renderer |
String
|
<optional> |
'2d' (default) or 'webgl' |
options |
Object
|
<optional> |
context attributes |
Returns:
HTML5 canvas element
Example
// fills the window
new Canvas();
// max 16:9 aspect ratio dimensions that will fit the window
new Canvas('16:9');
// 800x600 pixels
new Canvas(800, 600);
// fullscreen scaling, fits window (no stretching)
new Canvas(800, 600, 'fullscreen');
// pixelated scaling, fits window (no stretching)
new Canvas(256, 240, 'pixelated');Classes
Methods
resize(w, h)
Resizes the canvas, the world, and centers the camera.
Visually the canvas will shrink or extend to the new size. Sprites
will not change position.
If you would prefer to keep the camera focused on the same area, then
you must manually adjust the camera position after calling this
function.
Parameters:
| Name | Type | Description |
|---|---|---|
w |
Number
|
the new width of the canvas |
h |
Number
|
the new height of the canvas |