A Web Tutorial Series: HTML 5 The Canvas Element (Part II): Colors, Shadows, Shapes, & Images
Review of Our Last Tutorial & Our Goals
In our last tutorial, A Web Tutorial Series: HTML 5 - The canvas Element, A HTML Container for Graphics, we introduced the HTML canvas element which was added in the HTML 5 release to give developers a means of adding images, shapes, and text techniques to their web pages. We drew some simple shapes and worked with outline and color filled text. In this tutorial we will look at some more involved properties associated with that element in terms of styling text, drawing more involved shapes, and using images. We willbe using JavaScript, but not embedding it in the HTML code, but using it as linked in files.
One of the Thing You Might Want to Place on A Canvas: An Image
An image is something you might want to place on a canvas. The following snapshot show part of an image which was larger than the canvas size. It is a way to crop a photo for your page, if the pages has a space limitation and you happen to be more interested in part of the image detail than having to present the entire image.
The code producing this image illustrates several concepts with respect to JavaScript which we will defer in this tutorial and cover in the next tutorial when we talk more about JavaScript functions in HTML.
Incorporating an Image on a Canvas
Placing Text On A Canvas
Several important concepts are illustrated in this example. For that reason the code is included here.
In the HTML file there are two main points to emphasize:
- in the head element we are not including the JavaScript code, rather we make a reference to a file. Note in this case we merely specify the file name as the code is contained in the same directory as the HTML file. Generally, in development environments this would not be the case and an absolute path or relative path name would be required.
<head>
<script src="drawing_text.js"></script>
.....anything else you might like to specify goes here. <title> is generally inserted
</head>
- we specifed the required id for the canvas. The id is need by the JavaScript code to locate the canvas. The required attributes with and height are here as well. (The section tags were add to illustate some past learning regarding semantic tags in HTML.)
<section id="main">
<canvas id="canvas" width="500" height="300"
style="border:5px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</section>
</body>
</html>
- This JavaScript function is what performs the write (i.e. canvas.fillText). We introduced two canvas properties: font and textAlign. "font" can contain any of the usual attributes we have seen with text styling in HTML. We will discuss the statement canvas.textAlign in the next section.
function drawingText() {
var c = document.getElementById('canvas');
canvas = c.getContext('2d');
canvas.font = "bold 25px Arial";
canvas.textAlign = "start";
canvas.fillText("When in the course of Human events...",10,30);
}
- This final statement regarding the need for event listeners when using the canvas element will be discussed in the next tutorial.
window.addEventListener("load",drawingText, false);
Writing Text on a Canvas Using JavaScript
The Canvas textAlign Property
The textAlign property looks a little different from what we encountered in HTML. The illustration which follows discuss the possible values for textAlign. A code snippet is also provided there. All of the alignment performed is relative to the blue line which was drawn. The blue line was just drawn to give a reference point the what values were set for x and y in each of the case.
The Various Properties of Text Alignment on a Canvas
Drawing a Shadow for Text
A nice effect which can make a reader of your web page take real notice (if not overdone) is a shadow effect. In creating a shadow for one important point is that the statements relating to the shadow must precede the drawing of the text.
The statements involved with creating shadows are property statements of the canvas. Examples are:
canvas.OffsetShadowX= { a value in pixels}; which creates the shadow that number of px to the right of the text.
canvas.OffsetShadowY = {a value in pixels}; which creates the shadow that number of px down from the text.
Two other properties for shadows are;
canvas.shadowColor = {any valid color}. The color value can be specified as a name. an rgb value, an rgba value, or a hex value. Note that all color specifications must be enclosed with quotes.
canvas.shadowBlur = { a value from 0 (no blur) on upwards} indicates the indistinctness of the shadow.
Creating a Shadow For Text
Drawing Shapes
The following illustration demonstrates drawing a simple figure on a canvas. The statements used for this triangle include: the beginPath() method. Which creates an alert to JavaScript that a drawing is about to take place. We then use the moveTo() method to go to the point at which the drawing will start. Next we used the lineTo() method to create a line, a second line was drawn with the lineTo() method, we followed that with the closePath() method to draw the segment which draws from the current point to the origination, completing the figure. Now we need to call the stroke() method to actually complete the figure.
We used the simple lineTo() method in our example. There are other methods to connect two points:
- arc() - the values specified are x, y, radius, beginning angle, ending angle, and direction (clockwise or counterclockwise)
- arcTo() - creates an between two tangents. A simple example would be creating a "rounded corner".
- bezierCurveTo()
- quadricCurveTo()
,
Please Rate This Tutorial on Its Content and Clarity
Wrap Up and What's Next
In this tutorial we first looked at placing an image on a canvas. Care mustbe taken to size the canvas appropriately to the image size. Next we looked at writing text to a canvas and using some shadowing and burring techniques.We ended this tutorial by demonstrating how to draw a simple figure on a canvas.
We used JavaScript outside of the HTML file. We created a script file (and the file type should be specified as "js"). and linked the file in in the header.
In the next tutorial we will finish up out work with the canvas element. We will also point out certain features of the JavaScript code we implemented.
