MCanvas

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.

Usage

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.beginPath();
    context.arc(canvas.width/2, canvas.height/2, 100, 0, 2 * Math.PI, false);
    context.fillStyle = "#000";
    context.fill();
    context.closePath();

  <?php
}

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.

Clear

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:

• Wrapper (HTMLDivElement). Full web browser support. Access it with $("#ComponentName_outer").get()[0].
  • Main element (HTMLCanvasElement). Wide browser support. Access it with: $("#ComponentName").get()[0].

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

JSPaint

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

Documentation

• HTML Documentation.
  • Canvas on Mozilla’s Documentation.
  • Canvas on W3Schools.
  • How to Draw with HTML5 Canvas, by Jamie Newman.
  • Canvas on Opera’s Documentation.
• JavaScript Documentation.
  • WebGL Documentation.

See Also

• Alternatives: Canvas (web applications).
• Related components: MShape.
• Canvas on Wikipedia.