HTML5 APPLICATIONS DEVELOPMENT MANUAL

(lu) #1

The canvas Element


The canvas element creates a blank container for graphics. It’s a new


element in HTML5 and you can draw graphics using JavaScript.


Drawing on a canvas is done by using the Canvas API. Canvas can is


used by developers to create 2D games or animations


Creating an outline of a shape


To create an outline of a rectangle without a fill color, use the


context.strokeRect method. It uses the same values as context.fillRect. To


modify the color of the outline (the stroke color), use context.strokeStyle.


For example, to create a 200 x 100 pixel rectangular outline in red, use these


methods in your JavaScript:


context.strokeStyle = "red";


context.strokeRect(10,20,200,100);


<!DOCTYPE html>





Canvas Test
Free download pdf