HTML5 Builder – HTML5 Canvas 2d Tutorial
By Al Mannarino, Embarcadero Technologies, Inc.
Introduction
This tutorial shows you how to use the HTML5 Canvas 2d component in HTML5 Builder.
A Canvas is a rectangular area to draw shapes.
To use this component, just define the type of Context you want to use, and use the OnPaint JavaScript event to draw on the canvas.
There is also a global JavaScript variable that will hold the context, so you can draw on the canvas from outside the OnPaint event. That variable is called ComponentName_ctx, where ComponentName is the value of the Name property for the canvas component.
Steps:
1. First we’ll create a new Server Web Application
A server web application is a web application that runs in a web server, allowing you to use both server-side and client-side web technologies, and built-in support for database interaction and AJAX is provided. Advanced interface localization features are also available. Once deployed to the server, it can be accessed through a web browser from any device.
Do: Home > New > HTML5 Builder Projects > Server Web Application.
Your new Web Server Project will then be created with an empty server page (unit1.php), which will be opened on the Design view.
2. Drop a HTML5 Canvas on the page.
Do: From the Tool Palette, drop a HTML5 Canvas component on the web page.
3. Resize the Canvas to fill the entire page.
4. Looking at the properties of the HTML5 Canvas component from the Object Inspector, the most important property is the Context. The Context defines the JavaScript API we will use to draw shapes on the Canvas.
2d is the only standard Canvas Context currently available. But despite its 2d name there are several available JavaScript libraries you can use to draw 3D shapes with the Canvas component.
Note: For a Canvas 3D example, using Context=experimental-webgl, please look the CanvasPlanets project in the Demos folder installed with HTML5 Builder located here: C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\HTML5
Another important property is the NoCanvasSupportedError. This lets you define an alternative content message to be displayed on the page, instead of the canvas, for web browsers that do not currently support the HTML5 Canvas component.
The actual drawing of the canvas is performed on the OnPaint Javascript event.
The OnPaint event gets the Canvas Context object (2d in lower case), and will use it from that event to draw shapes on the Canvas.
5. Double-click on the OnPaint event,
This will take us into the Code editor, to add our JavaScript code for the function HTML5Canvas1JSPaint:
6. We’ll add code to get the context (which is on the event parameter), and we’ll also get the Canvas component since it will be really convenient to use for its dimensions.
//begin js
// Get context and canvas component.
context = event;
canvas = $('#Canvas1');
//end
7. Next for drawing, we’ll define a radial gradient. We’ll use its context and create its Radial Gradient. This type of Radial Gradient will be defined by two circles. Each one with X and y coordinates for its center and its radius. We will use concentric circles in this example and place them both on the middle of the canvas. The first circle will have no radius and the second will have half the canvas width as its radius. We code this like this:
// Create the Radial Gradient (background circle).
var gradient = context.createRadialGradient(
canvas.width()/2, canvas.height()/2, 0,
canvas.width()/2, canvas.height()/2, canvas.width()/2);
8. Next, let’s define some colors for the radius.
The Radiant Gradient has a method called addColorStop(float position, string color) which sets the position of the color along the radiant and the color itself. You can specify the color using string color names like ‘yellow’, ‘red’ and ‘black’, etc. We set the colors along the radiant like this:
// Add colors to the Radiant Gradient
gradient.addColorStop(0, 'yellow');
gradient.addColorStop(0.6, 'red');
gradient.addColorStop(1, 'black');
9. Next, we get to use that gradient in the context by setting the context.fillStyle method equal to the gradient, like this:
//Add fillStyle
context.fillStyle = gradient;
10. Next, we use the context to draw a rectangle which takes the whole canvas and uses our gradient, like this:
//Draw the rectangle
context.fillRect(0, 0, canvas.width(), canvas.height());
11. The complete JavaScript code for the function JSPaint looks like this:
//begin js
// Get context and canvas component.
context = event;
canvas = $('#Canvas1');
// Create the Radial Gradient (background circle).
var gradient = context.createRadialGradient(
canvas.width()/2, canvas.height()/2, 0,
canvas.width()/2, canvas.height()/2, canvas.width()/2);
// Add colors to the Radiant Gradient
gradient.addColorStop(0, 'yellow');
gradient.addColorStop(0.6, 'red');
gradient.addColorStop(1, 'black');
//Set the fillStyle and Draw the Rectangle
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width(), canvas.height());
//end
12. SAVE ALL
13. Let’s run the app, and see it print the canvas!
Run (F9) Hide image
You should get this. Very cool!
14. Close web page.
15. Our $Canvas1 is also a global JavaScript variable that holds the context, so you can draw on the canvas from outside the OnPaint event. That variable is called ComponentName_ctx, where ComponentName is the value of the Name property for the canvas component. So, for our application it’s Canvas1_ctx.
16. Let’s add a Button, that when clicked by the User, clears the content of the canvas.
Resize the right-side of the canvas, and add a Button, like this:
17. From the Object Inspector, change the Button’s Caption = CLEAR
Change the ButtonType = Normal
18. Use Button’s Javascript OnClick event for our JavaScript code to clear the content of the canvas.
19. Well use the name of the global variable, named after the Canvas component with _ctx (Canvas1_ctx) and call its clearRect method and pass in the coordinates of the canvas, like this:
function Button1JSClick($sender, $params)
{
?>
//begin js
Canvas1_ctx.clearRect(0, 0, canvas.width(), canvas.height());
//end
<?php
}
20. Run the app, and click the CLEAR button.
Run (F9) Hide image
The content of the canvas should get cleared when you click the CREAR button:
21. This ends this tutorial on how to use the HTML5 Canvas 2d component in HTML5 Builder. For a more detailed Canvas 2d example, please see the CanvasColorCircles project in the Demos directory installed with HTML5 Builder at this location: C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\HTML5
Concluding Remarks
Embarcadero’s HTML5 Builder is the definitive software for Rapid Application Development with Web Technologies. HTML5 Builder and its library, the RAD PHP Component Library (RPCL), includes a lot of new features and improvements to make your life easier, and take the RAD methodology even further into the web development. HTML5 Builder features a brand-new interface that adapts itself to your workflow as you take care of the different aspects of your application: writing the logic, designing the Interface, managing databases, and so much more. For HTML5, the RPCL now supports HTML5, the new version of the web standard that is revolutionizing the way you write webpages! To learn more about HTML5 Builder, or to download a trial, visit http://www.embarcadero.com/products/HTML5-Builder
Tags: HTML5 Builder HTML5 Builder Canvas 2d
