The Canvas
Introducing the Canvas The canvas is completely new to HTML5 and enables designers and programmers to create and place graphics directly onto a web page. Prior to HTML5, an external plug-in, usually Adobe Flash, was required to accomplish many of the features that the canvas can now perform. The canvas is extremely flexible. It can be used to draw simple lines and geometric figures, but it can also be used to create highly complex and interactive games and applications. With its relatively broad browser support, this new feature promises to bring faster and more reliable graphics to the web in the near future. Unlike the new HTML5 elements we have covered thus far, the canvas absolutely requires the use of JavaScript to function. For this reason, we will be getting an overview of the tool's capabilities in this course, but we won't be programming directly in JavaScript.
The <canvas> Element To create a canvas to begin drawing on, we use the <canvas> element with three attributes: <body> <canvas id="drawing" width="500" height="300"></canvas> </body> Until we add any actual drawing on the canvas, the element will be invisible on the screen. So let's add a border around it, using CSS: #drawing { border: 2px dashed blue; } The id attribute is essential, as it will be used by JavaScript to identify which element is to be manipulated. Though the width and height attributes are not strictly required, they should always be defined. As before, the closing </canvas> tag is mandatory.
Canvas Coordinates To be able to draw on the canvas, we'll first need to understand how the coordinate system works. Just as in algebra, there are x and y axes to define specific locations: 500px (500,0) is the top right corner of the canvas. (0,0) is the top left corner of the canvas. 300px (500,300) is the bottom right corner of the canvas. (0,300) is the bottom left corner of the canvas. The upper limits of the x and y coordinates are dependent, of course, on the width and height, respectively, we defined for the <canvas> element. In this example, we defined a canvas with the dimensions of 500 pixels wide by 300 pixels high.
Drawing a Straight Line Before we begin drawing on the canvas, we need to run a few lines of JavaScript code: <script> window.onload = function() { var canvas = document.getElementById("drawing"); var context = canvas.getContext("2d"); } </script> The above script tells the browser to wait until the page has loaded before running. Then, it defines which screen element to select (in this case, the one whose id is "drawing"). Now let's add the code to draw a single straight line: ... context.moveTo(100,100); context.lineTo(400,100); context.stroke();
Line Options Here is the full script for drawing the line, with three new options defined: <script> window.onload = function() { var canvas = document.getElementById("drawing"); var context = canvas.getContext("2d"); context.lineWidth = 5; context.strokeStyle = "red"; context.lineCap = "round"; context.moveTo(100,100); context.lineTo(400,100); context.stroke(); } </script> In the highlighted new code, we increased the width of the line to 5 pixels, we changed the color of the line to red, and we rounded off the ends of the line.
Drawing a Rectangle A special function is available to draw a rectangle on the canvas: <script> window.onload = function() { var canvas = document.getElementById("drawing"); var context = canvas.getContext("2d"); context.lineWidth = 3; context.strokeStyle = "#f1b2dc"; context.strokeRect(50,50,200,200); } </script> We first define the line width and color, as before. Then, as we draw the actual rectangle, we define the top left x and y location, the height, and the width.
Filling the Rectangle Instead of (or in addition to) the outline of the rectangle, we can fill it with color: <script> window.onload = function() { var canvas = document.getElementById("drawing"); var context = canvas.getContext("2d"); context.fillStyle = "#f1b2dc"; context.fillRect(50,50,200,200); } </script>
Drawing a Circle or Arc Another special function is available to draw a circle (or portion of circle) on the canvas: <script> window.onload = function() { var canvas = document.getElementById("drawing"); var context = canvas.getContext("2d"); context.lineWidth = 2; context.strokeStyle = "orange"; context.arc(200,150,75,0,2*Math.PI); context.stroke(); } </script> We first define the line width and color, as before. Then, we define the circle by specifying the x and y coordinates of its center, the circle radius, and the beginning and ending angles (which define how much of the circle is visible).
Filling the Circle Instead of (or in addition to) the line outline of the circle, we can fill it with color: <script> window.onload = function() { var canvas = document.getElementById("drawing"); var context = canvas.getContext("2d"); context.fillStyle = "orange"; context.arc(200,150,75,0,2*Math.PI); context.fill(); } </script>
Drawing Another Shape Any other shape using straight lines can be created: ... context.lineWidth = 1; context.strokeStyle = "green"; context.moveTo(150,200); context.lineTo(250,100); context.lineTo(400,125); context.lineTo(350,200); context.lineTo(150,200); context.stroke(); After defining the line width and color, we specify where to begin drawing and then each subsequent point. Finally, we return to the starting point to complete the shape.
Filling the Shape We can fill the shape, as before: ... context.lineWidth = 1; context.fillStyle = "green"; context.moveTo(150,200); context.lineTo(250,100); context.lineTo(400,125); context.lineTo(350,200); context.lineTo(150,200); context.closePath(); context.fill(); To fill the shape, we must add an extra line to tell the canvas to close off the shape first.
Overlapping Shapes Multiple lines, shapes, and other objects can be placed on the canvas at the same time. By default, the later ones take precedence – and appear on top – of earlier ones. However, designers can set transparency settings to control how much objects will show beneath those objects on top of them.
Advanced Canvas Features The canvas is powerful and flexible. We have many tools at our fingertips: Add images and text. Apply shadows to objects. Fill shapes with patterns or gradients. Move objects' locations over time, animating the canvas. Respond to what the user clicks or types and alter objects' locations or properties, making the canvas interactive. Combine interactivity and animation, creating fully functional applications and games solely with the HTML5 canvas. We won't be looking at the JavaScript code for these features, but let's see some actual examples of what the canvas can do in the hands of experienced programmers.
HTML5 Canvas Examples Game Animation Application Tool
Browser Support for <canvas> The <canvas> element is well supported: The need for a fallback is mainly for versions of Internet Explorer 8.0 and earlier.
Fallback for <canvas> The <canvas> element can use the same fallback mechanism that we saw with <audio> and <video> to run lines of code only if the element is not recognized by the browser: <canvas id="drawing" width="500" height="300"> <!-- place alternate content here --> </canvas> There are several ways web designers provide fallback content for the HTML5 canvas: Using the standard Flash fallback via <object> or <embed>. For newly created canvas applications, this might not be practical, as developing the same thing on a second, completely different platform (Flash) would require considerable time and resources. Using a fallback JavaScript library, such as ExplorerCanvas, that emulates the HTML5 canvas for earlier versions of Internet Explorer. Slow responsiveness and glitches can become a factor, especially for complex applications. Provide static content, such as a notice that the current browser cannot display the intended content. A difficult choice, but one that some web designers are now making, leaving older browsers (and their users) behind.