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.
Contents
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]
.
- Main element (HTMLCanvasElement). Wide browser support. Access it with:
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.