HTML Canvas Drawing - W3Schools

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, ... Tutorials References Exercises Videos Menu Login Website GetCertified ProNEW HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOWTO W3.CSS JAVA JQUERY C C++ C# R React    Darkmode Darkcode × Tutorials HTMLandCSS LearnHTML LearnCSS LearnRWD LearnBootstrap LearnW3.CSS LearnColors LearnIcons LearnGraphics LearnSVG LearnCanvas LearnHowTo LearnSass DataAnalytics LearnAI LearnMachineLearning LearnDataScience LearnNumPy LearnPandas LearnSciPy LearnMatplotlib LearnStatistics LearnExcel XMLTutorials LearnXML LearnXMLAJAX LearnXMLDOM LearnXMLDTD LearnXMLSchema LearnXSLT LearnXPath LearnXQuery JavaScript LearnJavaScript LearnjQuery LearnReact LearnAngularJS LearnJSON LearnAJAX LearnAppML LearnW3.JS Programming LearnPython LearnJava LearnC LearnC++ LearnC# LearnR LearnKotlin LearnGo LearnDjango LearnTypeScript ServerSide LearnSQL LearnMySQL LearnPHP LearnASP LearnNode.js LearnRaspberryPi LearnGit LearnAWSCloud WebBuilding CreateaWebsiteNEW WhereToStart WebTemplates WebStatistics WebCertificates WebDevelopment CodeEditor TestYourTypingSpeed PlayaCodeGame CyberSecurity Accessibility DataAnalytics LearnAI LearnMachineLearning LearnDataScience LearnNumPy LearnPandas LearnSciPy LearnMatplotlib LearnStatistics LearnExcel LearnGoogleSheets XMLTutorials LearnXML LearnXMLAJAX LearnXMLDOM LearnXMLDTD LearnXMLSchema LearnXSLT LearnXPath LearnXQuery × References HTML HTMLTagReference HTMLBrowserSupport HTMLEventReference HTMLColorReference HTMLAttributeReference HTMLCanvasReference HTMLSVGReference GoogleMapsReference CSS CSSReference CSSBrowserSupport CSSSelectorReference Bootstrap3Reference Bootstrap4Reference W3.CSSReference IconReference SassReference JavaScript JavaScriptReference HTMLDOMReference jQueryReference AngularJSReference AppMLReference W3.JSReference Programming PythonReference JavaReference ServerSide SQLReference MySQLReference PHPReference ASPReference XML XMLDOMReference XMLHttpReference XSLTReference XMLSchemaReference CharacterSets HTMLCharacterSets HTMLASCII HTMLANSI HTMLWindows-1252 HTMLISO-8859-1 HTMLSymbols HTMLUTF-8 × ExercisesandQuizzes Exercises HTMLExercises CSSExercises JavaScriptExercises SQLExercises MySQLExercises PHPExercises PythonExercises NumPyExercises PandasExercises SciPyExercises jQueryExercises JavaExercises C++Exercises C#Exercises RExercises KotlinExercises GoExercises BootstrapExercises Bootstrap4Exercises Bootstrap5Exercises GitExercises Quizzes HTMLQuiz CSSQuiz JavaScriptQuiz SQLQuiz MySQLQuiz PHPQuiz PythonQuiz NumPyQuiz PandasQuiz SciPyQuiz jQueryQuiz JavaQuiz C++Quiz C#Quiz RQuiz KotlinQuiz XMLQuiz BootstrapQuiz Bootstrap4Quiz Bootstrap5Quiz CyberSecurityQuiz AccessibilityQuiz Courses HTMLCourse CSSCourse JavaScriptCourse FrontEndCourse SQLCourse PHPCourse PythonCourse NumPyCourse PandasCourse DataAnalyticsCourse jQueryCourse JavaCourse C++Course C#Course RCourse XMLCourse CyberSecurityCourse AccessibilityCourse Certificates HTMLCertificate CSSCertificate JavaScriptCertificate FrontEndCertificate SQLCertificate PHPCertificate PythonCertificate DataScienceCertificate Bootstrap3Certificate Bootstrap4Certificate jQueryCertificate JavaCertificate C++Certificate ReactCertificate XMLCertificate × Tutorials References Exercises PaidCourses Spaces Videos Shop Pro HTMLGraphics GraphicsHOME GoogleMaps MapsIntro MapsBasic MapsOverlays MapsEvents MapsControls MapsTypes MapsReference SVGTutorial SVGIntro SVGinHTML SVGRectangle SVGCircle SVGEllipse SVGLine SVGPolygon SVGPolyline SVGPath SVGText SVGStroking SVGFiltersIntro SVGBlurEffects SVGDropShadows SVGLinear SVGRadial SVGExamples SVGReference CanvasTutorial CanvasIntro CanvasDrawing CanvasCoordinates CanvasGradients CanvasText CanvasImages CanvasReference CanvasClock ClockIntro ClockFace ClockNumbers ClockHands ClockStart HTMLGame GameIntro GameCanvas GameComponents GameControllers GameObstacles GameScore GameImages GameSound GameGravity GameBouncing GameRotation GameMovement HTMLCanvasDrawing ❮Previous Next❯ DrawontheCanvasWithJavaScript AlldrawingontheHTMLcanvasmustbedonewithJavaScript: Example TryitYourself» Step1:FindtheCanvasElement Firstofall,youmustfindtheelement. ThisisdonebyusingtheHTMLDOMmethodgetElementById(): varcanvas=document.getElementById("myCanvas"); Step2:CreateaDrawingObject Secondly,youneedadrawingobjectforthecanvas. ThegetContext()isabuilt-inHTMLobject,withpropertiesandmethodsfor drawing: varctx=canvas.getContext("2d"); Step3:DrawontheCanvas Finally,youcandrawonthecanvas. Setthefillstyleofthedrawingobjecttothecolorred: ctx.fillStyle="#FF0000"; ThefillStylepropertycanbeaCSScolor,agradient,orapattern.ThedefaultfillStyleisblack. ThefillRect(x,y,width,height)methoddrawsarectangle,filledwiththefillstyle,onthecanvas: ctx.fillRect(0,0,150,75); ❮Previous Next❯ NEW WejustlaunchedW3Schoolsvideos Explorenow COLORPICKER Getcertifiedbycompletingacoursetoday! w3schoolsCERTIFIED.2022 Getstarted CODEGAME PlayGame