Creating User Interface Elements with Canvas or SVG
This topic compares how to use Canvas and SVG to develop an interactive pushbutton for use on a webpage.
- Canvas Code Sample Discusion
- Drawing the User Interface
- Processing the Click Event
- SVG Code Sample
- SVG Code Sample Discussion
- Comparison Summary
- Related topics
This topic contains two stand-alone code samples that demonstrate how Canvas and SVG create user interface buttons. These code samples are written in HTML5 and JavaScript. They explain the basic principles of how to create a simple button that displays an alert box when you click it. The first code sample shows how Canvas uses pixels in immediate mode to create this user interface element by drawing a circle with an arc method to develop a standard pushbutton. The second sample shows how SVG uses retained mode shape-based graphic techniques to create a similar button from a circle element. The technical discussion after each sample explains how the code works and provides links to further information. The final comparison material summarizes the main differences in creating a user interface button in each technology.
Canvas Code Sample
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// This function is called on page load.
function drawOnCanvas() {
// Get the canvas element.
var canvas = document.getElementById("uIElement");
// Make sure you got it.
if (canvas.getContext)
// If you have it, create a canvas user interface element.
{
// Specify 2d canvas type.
var ctx = canvas.getContext("2d");
// Draw gold UI element.
// Start the path.
ctx.beginPath();
// Define the fill color in RGB for gold.
ctx.fillStyle = "rgb(255 ,215 ,0)";
// Draw the circle using an arc.
ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);
// Fill the circle.
ctx.fill();
}
}
// This function is called when you click the canvas.
function clickOnUI() {
alert("You clicked the canvas UI element.");
}
</script>
</head>
<body onload="drawOnCanvas()">
<h1>
Canvas User Interface
</h1>
<!-- Create the Canvas element. -->
<canvas id="uIElement" width="200" height="200" onclick="clickOnUI()">
</canvas>
<p>
Click on the gold circular user interface element.
</p>
</body>
</html>
Canvas Code Sample Discusion
The Canvas sample uses a standard HTML5 header, <!doctype html>, so that browsers can distinguish it as part of the HTML5 specification.
The <canvas> tag is included in the body. You must specify the width and height. An ID is assigned to the tag so that it can be part of the document object model. You must also specify which function is called when the canvas is clicked.
The <script> portion of the page has two sections; one for drawing the user interface and the other for processing the click event on the user interface.
Drawing the User Interface
The drawOnCanvas function is called when the page loads. It draws the user interface in pixels.
The canvas element is added to the DOM and the drawing context is created.
The drawing action starts with beginPath. A color (gold) is specified with fillStyle. The path is extended by using the arc method to create a circle. Then the path is completed by calling fill.
Processing the Click Event
The clickOnUI function is called when the user clicks the canvas element. An alert box is displayed.
SVG Code Sample
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// This function is called when the circle is clicked.
function clickMe() {
// Display the alert.
alert("You clicked the SVG UI element.");
}
</script>
</head>
<body>
<h1>
SVG User Interface
</h1>
<!-- Create the SVG pane. -->
<svg height="200" width="200">
<!-- Create the circle. -->
<circle cx="100" cy="100" r="50" fill="gold" id="uIElement" onclick="clickMe();"
/>
</svg>
<p>
Click on the gold circular user interface element.
</p>
</body>
</html>
SVG Code Sample Discussion
The SVG sample uses a standard HTML5 header, <!doctype html>, so that browsers can disinguish it as part of the HTML5 specification. Be aware that not all browsers support this aspect of HTML5, where SVG tags are treated as if they are HTML tags. This treatment is called inline SVG.
The svg tag is included in the body. You must specify the width and height of the SVG drawing container shape. Inside the SVG container, you must add a circle shape element . An ID is assigned to the circle tag so that it can be part of the document object model. You must specify the starting location for the circle and the radius. You must also specify which function is called when the circle is clicked. Be aware that unlike the Canvas sample, you can process click events on only the circle and not the whole SVG pane. All the user interface elements are created in the body and not by using JavaScript.
The script section has only one function that processes the click event when you click it, displaying an alert.
Comparison Summary
The main difference between these code samples is that by using SVG’s retained mode graphic display, you can create all the user interface details in HTML-like tags in the body. Because each SVG element and sub-element can respond to individual events, you can create complex user interfaces very easily. Canvas requires that you follow a more complex code sequence to specify how each portion of the user interface is created. The sequence you need to use is:
- Get the context.
- Start drawing.
- Specify colors of each line and fill.
- Define the shape.
- Finish drawing.
In addition, Canvas can only process events for the entire canvas. If you have a more complicated user interface, you must determine the coordinates of where the click on the canvas took place. SVG can process events for each sub-element separately.
In general, SVG needs fewer lines of code than an equivalent Canvas program. In the previous samples, the SVG page contains 34 lines of code and the Canvas page contains 55 lines.