From HTML5 Builder
Jump to: navigation, search
CanvasColorCircles.php (sample application).
CanvasPlanets.php (sample application).

The Canvas 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 Canvas, you only need to define and event handler for its OnPaint JavaScript event. Use that event to retrieve the canvas context (event parameter) 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: Canvas1_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: Canvas1FunctionName();.


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

Server-side Features

Properties, Methods and Events

Documented in the RPCL Reference.

Help Resources


Video Tutorials

Sample Applications

On the HTML5 folder inside the sample applications directory you will find two forms showcasing the Canvas:

  • CanvasColorCircles.php. Interactive Canvas using a 2D context. It has settings to modify the content of the Canvas on the spot, and a button to generate a PNG file with the current content.
  • CanvasPlanets.php. Adaption to the Canvas component of an official WebGL 3D example.



Cheat Sheets

See Also