Html5--canva Drawing 1 Simple graphics

<!     DOCTYPE html>Body{background: #131115;}    #c1 {background: #fbf7fe;} </style> <script>window.onload=function(){        varOc=document.getelementbyid (' C1 '); varOgc=oc.getcontext (' 2d '); Ogc.fillstyle= ' Red '; Ogc.strokestyle= "Blue"; Ogc.linewidth=10; /*Setting the angle*/Ogc.linejoin= ' Round '; /*a square without a border*/Ogc.fillrect (50,50,100,100); /*a square with a border*/Ogc.strokerect (50.5,50.5,100,100); /*Background Color*/    }   </script>
Triangle
<!     DOCTYPE html>Body{background: #131115;}    #c1 {background: #fbf7fe;} </style> <script>window.onload=function(){        varOc=document.getelementbyid (' C1 '); varOgc=oc.getcontext (' 2d '); /*Start Drawing lines*/Ogc.beginpath (); /*starting point*/Ogc.moveto (100,100); /*Point*/Ogc.lineto (200,200); Ogc.lineto (300,200); /*closed*/Ogc.closepath (); /*Generate lines*/        /*Ogc.stroke ();*/        /*Filling*/Ogc.fill (); }   </script>
Canvas Package
<!     DOCTYPE html>Body{background: #131115;}    #c1 {background: #fbf7fe;} </style> <script>window.onload=function(){        varOc=document.getelementbyid (' C1 '); varOgc=oc.getcontext (' 2d '); /*Save Path*/Ogc.save (); Ogc.fillstyle= ' Red ';        Ogc.beginpath (); /*Square aggregate Function*/Ogc.rect (100,100,100,100);        Ogc.closepath ();        Ogc.fill (); /*recovery path ogc.fillstyle= ' red '; The following code does not affect the encapsulation function*/Ogc.restore ();        Ogc.beginpath (); Ogc.rect (220,100,100,100);        Ogc.closepath ();               Ogc.fill (); }   </script>
Mouse Draw Line Code
<!     DOCTYPE html>Body{background: #131115;}    #c1 {background: #fbf7fe;} </style> <script>window.onload=function(){        varOc=document.getelementbyid (' C1 '); varOgc=oc.getcontext (' 2d '); Oc.onmousedown=function(EV) {varev=ev| |window.event; Ogc.moveto (Ev.clientx-oc.offsetleft,ev.clienty-oc.offsettop); Oc.onmousemove=function(EV) {varev=ev| |window.event; Ogc.lineto (Ev.clientx-oc.offsetleft,ev.clienty-oc.offsettop);                Ogc.stroke (); } document.onmouseup=function() {Oc.onmousemove=NULL; Oc.onmouseup=NULL; }        }    }   </script>
Simple Block Slide Code
<!     DOCTYPE html>Body{background: #131115;}    #c1 {background: #fbf7fe;} </style> <script>window.onload=function(){        varOc=document.getelementbyid (' C1 '); varOgc=oc.getcontext (' 2d '); varNum=0; Ogc.fillstyle= ' Red '; Ogc.fillrect (30,0,100,100); SetInterval (function() {num++; Ogc.clearrect (30,0, Oc.width,oc.height); Ogc.fillrect (30,num,100,100); },30)    }   </script>
Html5--canva Drawing 1 Simple graphics