HTML5 Graphics and Canvas

Course details

HTML5 and the canvas provide a significant improvement to graphic capabilities on the web. The canvas can be used for interactive or very details drawing within a web page and SVG can be used to ensure the quality of your images are not lost due to scaling on all screen sizes. In this course, you'll learn the fundamentals of using both SVG and the HTML5 canvas and how they'll allow your web site to scale and dynamically display or draw graphics.

• Topic T2 Objective O3
• start the course
• Topic T6 Objective O7
• describe Scalable Vector Graphics (SVG) and its use in creating high quality images in HTML5
• Topic T10 Objective O11
• add an SVG drawing to an HTML5 page that draws a line
• Topic T14 Objective O15
• use SVG to draw a rectangle in an HTML5 document
• Topic T18 Objective O19
• describe how SVG can be used to make a rectangle with rounded corners in an HTML5 document
• Topic T22 Objective O23
• use SVG to draw circles and ellipses in an HTML5 document
• Topic T26 Objective O27
• use SVG to add polyline drawings in an HTML5 document
• Topic T30 Objective O31
• use SVG to add text to an HTML5 document
• Topic T34 Objective O35
• describe how to rotate SVG objects in HTML5
• Topic T38 Objective O39
• work with SVG to place text on a path in an HTML5 document
• Topic T42 Objective O43
• add transparency to an SVG object in an HTML5 document
• Topic T47 Objective O48
• describe the HTML5 Canvas and why it would be used
• Topic T51 Objective O52
• use the canvas in an HTML5 document
• Topic T55 Objective O56
• apply size constraints to a canvas to have it fit the size of the screen in an HTML5 document
• Topic T59 Objective O60
• describe how to move the canvas in an HTML5 document
• Topic T63 Objective O64
• describe how to rotate the canvas in an HTML5 document
• Topic T68 Objective O69
• use HTML5 to draw lines on the canvas
• Topic T72 Objective O73
• use HTML5 to render text on the canvas
• Topic T76 Objective O77
• draw rectangles on the canvas using HTML5
• Topic T80 Objective O81
• use HTML5 to draw arcs and curves on the canvas
• Topic T84 Objective O85
• describe how circles can be drawn to the canvas using HTML5
• Topic T88 Objective O89
• perform canvas operations to load and display a bitmap graphic in an HTML5 document
• Topic T93 Objective O94
• set the color of the canvas using HTML5
• Topic T97 Objective O98