WebGL - Html5 Canvas Overview - Tutorialspoint

HTML5 Canvas is also used to write WebGL applications. To create a WebGL rendering context on the canvas element, you should pass the string experimental-webgl, ... WebGLTutorial WebGL-Home WebGL-Introduction WebGL-Html5CanvasOverview WebGL-Basics WebGL-GraphicsPipeline WebGLApplication WebGL-SampleApplication WebGL-Context WebGL-Geometry WebGL-Shaders AssociatingAttributes&BufferObjects WebGL-DrawingaModel WebGLExamples WebGL-DrawingPoints WebGL-DrawingaTriangle WebGL-ModesofDrawing WebGL-DrawingaQuad WebGL-Colors WebGL-Translation WebGL-Scaling WebGL-Rotation WebGL-CubeRotation WebGL-InteractiveCube WebGLUsefulResources WebGL-QuickGuide WebGL-UsefulResources WebGL-Discussion SelectedReading UPSCIASExamsNotes Developer'sBestPractices QuestionsandAnswers EffectiveResumeWriting HRInterviewQuestions ComputerGlossary WhoisWho WebGL-Html5CanvasOverview Advertisements PreviousPage NextPage  Tocreategraphicalapplicationsontheweb,HTML-5providesarichsetoffeaturessuchas2DCanvas,WebGL,SVG,3DCSStransforms,andSMIL.TowriteWebGLapplications,weusetheexistingcanvaselementofHTML-5.ThischapterprovidesanoverviewoftheHTML-52Dcanvaselement. HTML5Canvas HTML-5providesaneasyandpowerfuloptiontodrawgraphicsusingJavaScript.Itcanbeusedtodrawgraphs,makephotocompositions,ordosimple(andnotsosimple)animations. HereisasimpleelementhavingonlytwospecificattributeswidthandheightplusallthecoreHTML-5attributeslikeid,name,andclass. Syntax ThesyntaxofHTMLcanvastagisgivenbelow.Youhavetomentionthenameofthecanvasinsidedoublequotations(“”). CanvasAttributes Thecanvastaghasthreeattributesnamely,id,width,andheight. Id−IdrepresentstheidentifierofthecanvaselementintheDocumentObjectModel(DOM). Width−Widthrepresentsthewidthofthecanvas. Height−Heightrepresentstheheightofthecanvas. Theseattributesdeterminethesizeofthecanvas.Ifaprogrammerisnotspecifyingthemunderthecanvastag,thenbrowserssuchasFirefox,Chrome,andWebKit,bydefault,provideacanvaselementofsize300×150. Example-CreateaCanvas Thefollowingcodeshowshowtocreateacanvas.WehaveusedCSStogiveacoloredbordertothecanvas. LiveDemo Onexecuting,theabovecodewillproducethefollowingoutput− TheRenderingContext Theisinitiallyblank.Todisplaysomethingonthecanvaselement,wehavetouseascriptinglanguage.Thisscriptinglanguageshouldaccesstherenderingcontextanddrawonit. ThecanvaselementhasaDOMmethodcalledgetContext(),whichisusedtoobtaintherenderingcontextanditsdrawingfunctions.Thismethodtakesoneparameter,thetypeofcontext2d. Thefollowingcodeistobewrittentogettherequiredcontext.Youcanwritethisscriptinsidethebodytagasshownbelow. LiveDemo Onexecuting,theabovecodewillproducethefollowingoutput− FormoreexampleonHTML-52DCanvas,checkoutthefollowinglinkHTML-5Canvas. WebGLContext HTML5CanvasisalsousedtowriteWebGLapplications.TocreateaWebGLrenderingcontextonthecanvaselement,youshouldpassthestringexperimental-webgl,insteadof2dtothecanvas.getContext()method.Somebrowserssupportonly'webgl'. LiveDemo Onexecuting,theabovecodewillproducethefollowingoutput− UsefulVideoCourses Video Three.js&WebGL3DProgrammingCrashCourse(VR,OpenGL) 10Lectures 1hours FrahaanHussain MoreDetail Video WebGL2D/3DProgrammingandGraphicsRenderingForTheWeb 28Lectures 4hours FrahaanHussain MoreDetail PreviousPage PrintPage NextPage  Advertisements Print  AddNotes  Bookmarkthispage  ReportError  Suggestions Save Close Dashboard Logout