Canvas of HTML5

First on the code:

<width= " $" height= "$"> Browser does not support html5! </ Canvas >

<script type= "Text/javascript" >varCanvas = Document.queryselector ("Canvas"); varcontext = Canvas.getcontext (' 2d '); //Set ShadowContext.shadowoffsetx = 5.0; Context.shadowoffsety= 5.0; Context.shadowcolor= "Rgba (50%,50%,50%,0.75)"; Context.shadowblur= 10.0; //draw a rectangular shapeContext.fillstyle = ' Red '; Context.fillrect (2, 2, 300, 200); //Add BorderContext.strokerect (0, 0, 304, 204); //Draw a rectangleContext.fillstyle = ' Rgba (255,255,0,0.5) '; Context.fillrect (250, 150, 300, 200); //clear the specified areaContext.clearrect (350, 200, 100, 100); </script>

-Rectangles Draw Rectangle Object

-Context.fillrect (X,Y,W,H)//Draw Rectangle
-Context.strokerect (X,Y,W,H)//Draw Border
-Context.clearrect (X,Y,W,H)//clear the specified area

-Colors Set Color

-Specify Color (red)

Specifying method color Values
-----------------------------
Hexa (hex) #FF0000
Hexa (short) #F00
Rgbrgb (255,0,0)
RGB (percent) RGB (100%,0%,0%)
Rgbargb (255,0,0,0.7)
RGBA (percent) Rgba (100%,0%,0%,0.7)
HSLHSL (0,100%,50%)
Hslahsla (0,100%,50%,1.0)
SVG (color name) red

-Shadow Shadow

  Context.shadowoffsetx = 5.0;   = 5.0;   = "Rgba (50%,50%,50%,0.75)";   = 10.0;

-Gradients Gradient

-1. Linear gradient

// start position up to position  var lingrad = context.createlineargradient (0,450,1000,450);   // nodes  in gradients Lingrad.addcolorstop (0.0, ' red ');  Lingrad.addcolorstop (0.5, ' yellow ');  Lingrad.addcolorstop (0.7, ' orange ');  Lingrad.addcolorstop (1.0, ' Purple ');   // Apply to Graphics  Context.fillstyle = Lingrad;  Context.fillrect (0,450,1000,450);

-2. Center area gradient

  //  6 set of numbers representing 2 circles  var radgrad = context.createradialgradient (260,320,40,200,400,200);  Radgrad.addcolorstop (0.0, ' yellow ');  Radgrad.addcolorstop (0.9, ' orange ');  Radgrad.addcolorstop (1.0, ' Rgba (0,0,0,0) ');   = Radgrad;  Context.fillrect (0, 200, 400, 400);

-Paths Draw Path lines

-Drawing process
1. Start Drawing Beginpath ()
2. Define all nodes
3. Draw with a stroke

Createlinea ();//draw a Type aCreatequa ();//draw a parabolic lineCreatebez ();//draw a Bezier curveCreatearc ();//draw a custom curveCreateroundedrect ();//draw a rounded shapeCreaterect ();//Draw a rectangle//draw a Type afunctionCreatelinea () {Context.fillstyle= ' Red '; Context.strokerect (0, 0, 300, 300);//Draw Border    //1. Start Drawing Beginpath ()Context.beginpath (); //2. Define all nodesContext.moveto (100, 200);//move pen to this coordinateContext.lineto (150, 50);//draw to the specified coordinatesContext.lineto (200, 200);//and then draw to another coordinate .Context.moveto (100, 120);//and move the pen to another areaContext.lineto (200, 120);//draw a line againcontext.textalign= ' Left ';//Set Horizontal alignmentContext.textbaseline = ' alphabetic ';//Set Vertical alignmentContext.font = ' bold 16px sans-serif ';//Setting the output font styleContext.filltext (' (100/200) ', 50, 220);//output text in specified coordinatesContext.filltext (' (150/50) ', 115, 30); Context.filltext (' (200/200) ', 150, 220); Context.filltext (' (100/120) ', 40, 100); Context.filltext (' (200/120) ', 180, 100); //3. Draw with a strokeContext.stroke ();}//draw a parabolic linefunctionCreatequa () {Context.strokerect (320, 0, 300, 300);//Draw BorderContext.beginpath (); Context.moveto (350, 250); Context.quadraticcurveto (400, 50, 600, 50); Context.stroke ();}//draw a Bezier curvefunctionCreatebez () {Context.strokerect (640, 0, 300, 300);//Draw BorderContext.beginpath (); Context.moveto (670, 250); Context.beziercurveto (880, 300, 700, 30, 900, 50); Context.stroke ();}//draw a custom curvefunctionCreatearc () {Context.strokerect (0, 320, 300, 300);//Draw BorderContext.beginpath (); Context.moveto (20, 430); Context.arcto (20, 370, 270, 370, 60); Context.stroke ();}//draw a rounded shapefunctionCreateroundedrect () {Context.strokerect (320, 320, 300, 300);//Draw Borderx= 340; Y= 370; W= 250; H= 200; R= 60;    Context.beginpath (); Context.moveto (x, y+R); Context.arcto (x, y, x+W, y, R); Context.arcto (x+ W, y, x + W, y +h, R); Context.arcto (x+ W, y + H, x, Y +h, R); Context.arcto (x, y+h, x, Y, R);    Context.closepath (); //closed CurveContext.stroke ();}//draw a Rectangle objectfunctionCreaterect () {Context.strokerect (640, 320, 300, 300);//Draw BorderContext.beginpath (); Context.rect (660,340,250,250); Context.stroke ();}

Canvas of HTML5