canvas-- Procedure - Property

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > entry 01canvas </ title > 
</ head > 
< body > 
< Canvas ID = 'Demo' width = "600" height = "600" > 
    your browser does not support canvas, please upgrade your browser. browser does not support display of this line of text 
</ Canvas > 

< Script >
    was canvas =document.getElementById ( ' Demo ' ); 
    canvas.style.border =  ' 1px Solid Red ' ;
     var CTX = canvas.getContext ( ' 2D ' );
     // ctx.beginPath (); 
    ctx.moveTo ( 100 , 100 ); 
    ctx.lineTo ( 300 , 100 ); 
    ctx.lineTo ( 300 , 300 );
     // set the width of the line 
    ctx.lineWidth =  . 4 ;
     // set the line color
    ctx.strokeStyle =  ' Red ' ; 
    ctx.closePath (); // sealing adapter to the initial position 
    // filled 
    ctx.fill (); // default = black -ctx.fileStyle 'Green'; 
    ctx.stroke ()
 < / Script > 

</ body > 
</ HTML >

Canvas rendered basic steps:

• The first step: obtaining context => canvasElem.getContext ( '2d');
• Step Two: Start route planning => ctx.beginPath ()
• The third step: moving start point => ctx.moveTo (x, y)
• Step Four: sketch lines (rectangular, circular, pictures ...) => ctx.lineTo (x, y)
• Step Five: A closed path => ctx.closePath ();
• Step Six: drawing strokes => ctx.stroke ();
•