From HTML5 Builder
Jump to: navigation, search

The MCanvas component lets you render 2D and 3D shapes, as well as bitmap images, dynamically.

It consists of a rectangular surface where you can draw graphics, either shapes or images (from files), using JavaScript. All the drawing is performed on the fly, letting you change the content of the canvas as a reaction to user input.

You can use the canvas to draw graphs, create animations, compose photos, or even develop games; all without relying on heavy libraries or client-side plugins like Flash.


To use a MCanvas, you only need to define and event handler for its OnPaint JavaScript event. Use that event to retrieve the canvas context (event paramenter) and use it to draw on the canvas.

For example:

function ComponentNameJSPaint($sender, $params)
    // Get context and canvas component.
    context = event;
    canvas = $('#ComponentName');

    // Draw a black circle on the center.
    context.arc(canvas.width/2, canvas.height/2, 100, 0, 2 * Math.PI, false);
    context.fillStyle = "#000";

The context is available outside the event, by the name of ComponentName_ctx, where the prefix ComponentName should be replaced by the actual Name of your canvas component. For example: MCanvas1_ctx.


To clear the canvas, you can use the clearRect() method of the context:

context = ComponentName_ctx;
canvas = $('#ComponentName');
context.clearRect(0, 0, canvas.width, canvas.height);

Client-side Features

DOM Elements

The component generates the following client-side DOM elements:

Client-side Events

Documented in the RPCL Reference.

Client-side Functions

Note: In order to call these functions, prefix them with ComponentName. For example: MCanvas1FunctionName();.


Renders the canvas, calling the JavaScript code defined on the event handler for OnPaint. You must pass it the context of a MCanvas component (ComponentName_ctx).

Server-side Features

Properties, Methods and Events

Documented in the RPCL Reference.

Help Resources


See Also