HTML5 Builder – HTML5 Canvas 2d Tutorial

Written by Al Mannarino on Posted in PROGRAMMING

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.

Hide image


2. Drop a HTML5 Canvas on the page.

Do: From the Tool Palette, drop a HTML5 Canvas component on the web page.

Hide image

3. Resize the Canvas to fill the entire page.

Hide image

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.

Hide image

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.

Hide image

Hide image

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,

Hide image

This will take us into the Code editor, to add our JavaScript code for the function HTML5Canvas1JSPaint:

Hide image

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

Hide image
Click to see full-sized image

expand view>>

Hide image
Click to see full-sized image

expand view>>

13. Let’s run the app, and see it print the canvas!

Run (F9) Hide image

You should get this. Very cool!

Hide image

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.

Hide image

Hide image

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:

Hide image
Hide image

17. From the Object Inspector, change the Button’s Caption = CLEAR

Change the ButtonType = Normal

Hide image

18. Use Button’s Javascript OnClick event for our JavaScript code to clear the content of the canvas.

Hide image

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:

Hide image

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

Hide image

    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



About
Gold User, Rank: 90, Points: 4

Check out more tips and tricks in this development video: