Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 1: Drawing by using the element CHAPTER 12 495

Lesson review

Answer the following questions to test your knowledge of the information in this lesson. You

can find the answers to these questions and explanations of why each answer choice is correct

or incorrect in the “Answers” section at the end of this chapter.

1. Which code example can be used to draw a rectangle on a element that has
   an id of myCanvas?
   A. var canvas = document.getElementById(‘myCanvas’);
   var ctx = canvas.getContext();
   ctx.rectangle(10, 10, 50, 75);
   B. var canvas = document.getElementById(‘myCanvas’);
   canvas.rectangle(10, 10, 50, 75);
   C. var canvas = document.getElementById(‘myCanvas’);
   var ctx = canvas.getContext(‘2d’);
   ctx.fillRect(10, 10, 50, 75);
   D. var canvas = document.getElementById(‘myCanvas’);
   var ctx = canvas.getContext();
   ctx.fillRect(10, 10, 50, 75);


2. You want to draw an arc that is approximately three-quarters of a circle. Which method
   is the easiest to use to accomplish this task?
   A. arcTo( )
   B. arc()
   C. circle()
   D. dot()

Lesson 2: Using scalable vector graphics

What is scalable vector graphics (SVG), and why would you want to use it? These are com-

mon questions, especially as everyone becomes aware of SVG due to its inclusion in HTML5.

In Lesson 1, “Drawing by using the <canvas> element,” you learned to draw on a <canvas>

element, using JavaScript. Although you might have used shape-specific methods such as fill-

Rect or arc, the rendering on the canvas is done in a bitmapped manner, meaning that pixels

are commanded to display, and after the shape rendered, the canvas is left with bitmapped

results. In other words, the canvas does not store the fact that you created a rectangle. If the

drawing surface is scaled larger, the canvas only has the pixels to work with, so the result is a

blocky, or pixelated, version of the graphic.

SVG is different from the canvas; with SVG, the commands are stored in a manner that

enables them to be re-executed. If the size of the drawing surface changes, the commands

can be scaled and re-executed for the new drawing to create a new image, based on the SVG

commands. The result is that you see a crisp image regardless of the scale.