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

6. HTML5 Canvas > Canvas Drawing Basics

Canvas Drawing Basics

The basic Canvas drawing commands are straightforward to implement and are discussed in the following sections.

The Canvas Element

Inserting a Canvas element into a web page is no different than inserting any other HTML element:

<canvas id= 'mycanvas' width = 512 height = 384>
    Fallback content
</canvas>

If you don’t specify any width or height attributes, the default size will be 300 × 150 pixels. It is possible to change the canvas size via CSS (e.g., width:50%), but it’s not recommended; depending on the browser implementation, the output may become distorted or scaled. However, you can style the element with the usual borders, margins, and background colors, although this in no way affects drawing to the canvas itself. The coordinate system has its default origin in the top left—coordinate (0,0)—so, for example, something drawn at coordinate (10, 15) would be positioned 10 pixels from the left and 15 pixels from the top.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

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

  

Start a Free Trial


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