Methods
# clearCanvas(canvasIdopt)
Clears an entire canvas and triggers a redraw.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
canvasId |
string |
<optional> |
renderNowCanvas | The canvas to clear. |
Example
// Create a simple canvas and write some text on it.
var canvas = "myCanvas";
rpgcode.createCanvas(640, 480, canvas);
rpgcode.drawText(270, 300, "Hello world!", canvas);
rpgcode.renderNow(canvas);
// Clears the canvas after 5 seconds have elapsed.
rpgcode.delay(5000, function(){
rpgcode.clearCanvas(canvas);
});# createCanvas(width, height, canvasId)
Creates a canvas with the specified width, height, and ID. This canvas will
not be drawn until renderNow is called with its ID.
Parameters:
| Name | Type | Description |
|---|---|---|
width |
number | In pixels. |
height |
number | In pixels. |
canvasId |
string | The ID to be associated with the canvas. |
Example
// Create a simple canvas and write some text on it.
var canvas = "myCanvas";
rpgcode.createCanvas(640, 480, canvas);
rpgcode.drawText(270, 300, "Hello world!", canvas);
rpgcode.renderNow(canvas); # destroyCanvas(canvasId)
Destroys the canvas with the specified ID, removing it from the engine.
Parameters:
| Name | Type | Description |
|---|---|---|
canvasId |
string | The ID for the canvas to destroy. |
Example
// Create a simple canvas and write some text on it.
var canvas = "myCanvas";
rpgcode.createCanvas(640, 480, canvas);
rpgcode.drawText(270, 300, "Hello world!", canvas);
rpgcode.renderNow(canvas);
// Destroys the canvas that we just created.
rpgcode.destroyCanvas(canvas);# drawOntoCanvas(sourceId, x, y, width, height, targetId)
Draws the source canvas onto the target canvas. Useful for combining multiple
canvases together.
Parameters:
| Name | Type | Description |
|---|---|---|
sourceId |
string | The ID of the source canvas. |
x |
number | Position in pixels on the target canvas. |
y |
number | Position y in pixels on the target canvas. |
width |
number | In pixels. |
height |
number | In pixels. |
targetId |
string | The ID of the target canvas. |
Example
// Canvas IDs.
var buffer = "buffer";
var lifeIcon = "life_icon";
// Assets to load up.
var assets = {
"images": [
"life.png"
]
};
// Load up the assets needed for this example.
rpgcode.loadAssets(assets, function () {
// Smaller canvas.
rpgcode.createCanvas(32, 32, lifeIcon);
// Canvas to draw onto.
rpgcode.createCanvas(640, 480, buffer);
// Set the image on the smaller canvas.
rpgcode.setImage("life.png", 0, 0, 32, 32, lifeIcon);
// Draw 3 hearts onto the buffer canvas.
for (var i = 1; i < 4; i++) {
rpgcode.drawOntoCanvas(lifeIcon, i * 32, 430, 32, 32, buffer);
}
// Show the larger canvas with the smaller hearts on it.
rpgcode.renderNow(buffer);
});# renderNow(canvasIdopt)
Renders the specified canvas, if none then the "renderNowCanvas" is shown.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
canvasId |
string |
<optional> |
renderNowCanvas | The ID of the canvas to render. |
Example
// Draw a rectangle on the default canvas and render it.
rpgcode.setColor(255, 0, 0, 1.0);
rpgcode.fillRect(0, 0, 100, 100);
rpgcode.renderNow();
// Create a canvas and draw a red rectangle on it.
var canvas = "myCanvas";
rpgcode.createCanvas(640, 480, canvas);
rpgcode.setColor(255, 0, 0, 1.0);
rpgcode.fillRect(0, 0, 100, 100, canvas);
rpgcode.renderNow(canvas); # setCanvasPosition(x, y, canvasId)
Sets the position of a canvas relative to its parent.
Parameters:
| Name | Type | Description |
|---|---|---|
x |
number | In pixels. |
y |
number | In pixels. |
canvasId |
string | The ID of the canvas to move. |
Example
// Create a canvas and draw a red rectangle on it.
var canvas = "myCanvas";
rpgcode.createCanvas(640, 480, canvas);
rpgcode.setColor(255, 0, 0, 1.0);
rpgcode.fillRect(0, 0, 100, 100, canvas);
rpgcode.renderNow(canvas);
// Now move it to a new position relative to its parent.
rpgcode.setCanvasPosition(100, 100, canvas);