Canvas of html5 -- draw simple rectangular and triangular instance code

Comments: There are two forms: fill and stroke. The specific implementation code is as follows. If you are interested, refer to the following, I hope this will help you to put a canvas element on the html page. The canvas Element should have three attributes: ID, width, and height.

The Code is as follows:
<Canvas id = "demo" width = "600" height = "600"> </canvas>

Get the canvas object and obtain the context var cxt = document. getElementById ('Demo'). getContext ("2d"). The parameter 2d is determined.

You can start to draw a graph in either of the following two forms: fill and stroke ).

Javascript code:

The Code is as follows:
<Script language = "javascript">
Var cxt = document. getElementById ('Demo'). getContext ("2d ");
Cxt. beginPath ();
Cxt. fillStyle = "# F00";/* set the fill color */
Cxt. fillRect (200,100,);/* draw a rectangle. The first two parameters determine the start position, and the last two parameters are the width and height of the rectangle */
Cxt. beginPath ();
Cxt. strokeStyle = "#000";/* set the border */
Cxt. lineWidth = 3;/* Border Width */
Cxt. strokeRect (0,120,200,100 );
Cxt. beginPath ();
Cxt. moveTo (0,350 );
Cxt. lineTo (100,250 );
Cxt. lineTo (200,300 );
Cxt. closePath ();/* optional steps to disable the drawn path */
Cxt. stroke ();
</Script>

: