new Canvas(widthopt, heightopt, optionsopt)
p5play adds some extra functionality to the `createCanvas`
function. See the examples below.
Creating a canvas in p5play disables the browser's default
keydown responses for the slash, space, and arrow keys to
prevent page scrolling which is disruptive to gameplay.
For an easy way to scale the canvas or make it pixelated, use
the `displayMode` function.
Only q5.js has support for canvas options (context attributes).
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
width |
Number
|
<optional> |
|
height |
Number
|
<optional> |
|
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);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 |