Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

14. HTML5: Introduction to canvas > 14.14. Transformations

14.14. Transformations

The next several examples show you how to use canvas transformation methods including translate, scale, rotate and transform.

14.14.1. scale and translate Methods: Drawing Ellipses

Figure 14.14 demonstrates how to draw ellipses. In line 18, we change the transformation matrix (the coordinates) on the canvas using the translate method so that the center of the canvas becomes the origin (0, 0). To do this, we use half the canvas width as the x-coordinate and half the canvas height as the y-coordinate (line 18). This will enable us to center the ellipse on the canvas. We then use the scale method to stretch a circle to create an ellipse (line 19). The x value represents the horizontal scale factor; the y value represents the vertical scale factor—in this case, our scale factor indicates that the ratio of the width to the height is 1:3, which will create a tall, thin ellipse. Next, we draw the circle that we want to stretch using the beginPath method to start the path, then the arc method to draw the circle (lines 20–21). Notice that the x- and y-coordinates for the center of the circle are (0, 0), which is now the center of the canvas (not the top-left corner). We then specify a fillStyle of orange (line 22) and draw the ellipse to the canvas using the fill method (line 23).


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free 10-Day Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint