API Documentation
Tutorials
Getting Started Your First Game Programming Guide Default Systems Example Games Advanced Topics

Namespace

Draw2D

Draw2D

View Source rpgcode.js, line 11

Methods

# drawCircle(x, y, radius, canvasIdopt)

Draws a circle onto the canvas.
Parameters:
Name Type Attributes Default Description
x number The start x postion.
y number The start y postion.
radius number In pixels.
canvasId string <optional>
 renderNowCanvas The ID of the canvas to draw on.

View Source rpgcode.js, line 628

Example
// Create a canvas and draw a red circle on it.
var canvas = "myCanvas";
rpgcode.createCanvas(640, 480, canvas);
rpgcode.setColor(255, 0, 0, 1.0);
rpgcode.drawCircle(100, 100, 25, canvas);
rpgcode.renderNow(canvas);

# drawLine(x1, y1, x2, y2, lineWidth, canvasIdopt)

Draws a line onto the canvas.
Parameters:
Name Type Attributes Default Description
x1 number In pixels.
y1 number In pixels.
x2 number In pixels.
y2 number In pixels.
lineWidth number In pixels.
canvasId string <optional>
 renderNowCanvas The ID of the canvas to draw on.

View Source rpgcode.js, line 781

Example
// Create a canvas and draw a red line on it.
var canvas = "myCanvas";
rpgcode.createCanvas(640, 480, canvas);
rpgcode.setColor(255, 0, 0, 1.0);
rpgcode.drawLine(25, 25, 50, 50, 1, canvas);
rpgcode.renderNow(canvas);

# drawRect(x, y, width, height, lineWidth, canvasIdopt)

Draws a rectangle onto the canvas.
Parameters:
Name Type Attributes Default Description
x number The start x postion.
y number The start y postion.
width number In pixels.
height number In pixels.
lineWidth number In pixels.
canvasId string <optional>
 renderNowCanvas The ID of the canvas to draw on.

View Source rpgcode.js, line 894

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.drawRect(0, 0, 100, 100, 1, canvas);
rpgcode.renderNow(canvas);

# drawRoundedRect(x, y, width, height, lineWidth, radius, canvasIdopt)

Draws a rectangle with rounded edges onto the canvas.
Parameters:
Name Type Attributes Default Description
x number The start x postion.
y number The start y postion.
width number In pixels.
height number In pixels.
lineWidth number In pixels.
radius number In pixels.
canvasId string <optional>
 renderNowCanvas The ID of the canvas to draw on.

View Source rpgcode.js, line 941

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.drawRoundedRect(0, 0, 100, 100, 1, 5, canvas);
rpgcode.renderNow(canvas);

# fillCircle(x, y, radius, canvasIdopt)

Fills a solid circle onto the canvas.
Parameters:
Name Type Attributes Default Description
x number The start x postion.
y number The start y postion.
radius number The start y postion.
canvasId string <optional>
 renderNowCanvas The ID of the canvas to draw on.

View Source rpgcode.js, line 1066

Example
// Create a canvas and draw a red circle on it.
var canvas = "myCanvas";
rpgcode.createCanvas(640, 480, canvas);
rpgcode.setColor(255, 0, 0, 1.0);
rpgcode.fillCircle(100, 100, 25, canvas);
rpgcode.renderNow(canvas);

# fillRect(x, y, width, height, canvasIdopt)

Fills a solid rectangle on the canvas.
Parameters:
Name Type Attributes Default Description
x number The start x postion.
y number The start y postion.
width number In pixels.
height number In pixels.
canvasId string <optional>
 renderNowCanvas The ID of the canvas to draw on.

View Source rpgcode.js, line 1110

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

# fillRoundedRect(x, y, width, height, radius, canvasIdopt)

Fills a solid rounded rectangle on the canvas.
Parameters:
Name Type Attributes Default Description
x number The start x postion.
y number The start y postion.
width number In pixels.
height number In pixels.
radius number In pixels.
canvasId string <optional>
 renderNowCanvas The ID of the canvas to draw on.

View Source rpgcode.js, line 1154

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.fillRoundedRect(0, 0, 100, 100, 5, canvas);
rpgcode.renderNow(canvas);

# getPixel(x, y, canvasIdopt) → {Draw2D.ImageData}

Gets the pixel ImageData at the (x, y) coordinate on the canvas.
Parameters:
Name Type Attributes Default Description
x number In pixels.
y number In pixels.
canvasId string <optional>
 renderNowCanvas The ID of the canvas to draw on.

View Source rpgcode.js, line 1493

An ImageData object.
Draw2D.ImageData
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();

// Get the red pixel at (50, 50) from the rectangle.
var imageData = rpgcode.getPixel(50, 50);
var rgba = imageData.data;

// Show the RGBA values of the pixel
alert("R, G, B, A (" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")");

# setColor(r, g, b, a)

Sets the RGBA color for all drawing operations to use. See RGBA Colors
Parameters:
Name Type Description
r number 0 to 255
g number 0 to 255
b number 0 to 255
a number 0 to 1.0

View Source rpgcode.js, line 2903

Example
// Set the color to red.
rpgcode.setColor(255, 0, 0, 1.0);

# setGlobalAlpha(alpha)

Sets the global drawing alpha for all subsequent canvas drawing operation. Useful for drawing transparent elements to a canvas. For more details see: Canvas Global Alpha
Parameters:
Name Type Description
alpha number

View Source rpgcode.js, line 2961

Example
// All drawing operations will now be semi-transparent
rpgcode.setGlobalAlpha(0.5);

# setPixel(x, y, canvasIdopt)

Sets the pixel ImageData at the (x, y) coordinate on the canvas.
Parameters:
Name Type Attributes Default Description
x number In pixels.
y number In pixels.
canvasId string <optional>
 renderNowCanvas The ID of the canvas to draw on.

View Source rpgcode.js, line 3002

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();

// Set a pixel to green at (50, 50) from the rectangle.
rpgcode.setColor(0, 255, 0, 1.0);
rpgcode.setPixel(50, 50);

Type Definitions

Object

# ImageData

Properties:
Name Type Description
data Array.<number> One-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 (inclusive).
width number In pixels.
height number In pixels.

View Source rpgcode.js, line 3621