HTML Tag - GeeksforGeeks

Trang chủ » Html Canvas » HTML Tag - GeeksforGeeks

Có thể bạn quan tâm

Skip to content geeksforgeeks
  • Courses
    • DSA Courses
    • Programming Languages
  • Tutorials
    • Python Tutorial
      • Python Loops and Control Flow
    • Java
      • Java Interview Questions
      • Java Quiz
      • Advance Java
    • Programming Languages
    • System Design
    • Interview Corner
    • Computer Science Subjects
    • DevOps
    • Linux
    • Software Testing
    • Databases
    • Android
    • Excel
    • Mathematics
  • DSA
    • Data Structures
    • Algorithms
      • Analysis of Algorithms
      • Searching Algorithms
      • Sorting Algorithms
    • Practice
      • Company Wise Coding Practice
      • Practice Problems Difficulty Wise
      • Language Wise Coding Practice
      • Curated DSA Lists
    • Company Wise SDE Sheets
    • DSA Cheat Sheets
    • Puzzles
  • Data Science
    • Data Science Packages
    • Data Visualization
    • Data Analysis
  • Web Tech
    • Web Development Using Python
      • Django
      • Flask
    • Cheat Sheets
  • HTML Tutorial
  • HTML Exercises
  • HTML Tags
  • HTML Attributes
  • Global Attributes
  • Event Attributes
  • HTML Interview Questions
  • HTML DOM
  • DOM Audio/Video
  • HTML 5
  • HTML Examples
  • Color Picker
  • A to Z Guide
  • HTML Formatter
▲ Open In App HTML canvas Tag Last Updated : 21 Nov, 2024 Summarize Comments Improve Suggest changes Like Article Like Save Share Report Follow

The <canvas> tag in HTML is used to draw graphics on a web page using JavaScript. It can be used to draw paths, boxes, texts, gradients, and adding images. By default, it does not contain borders and text.

HTML <!DOCTYPE html> <html> <body> <canvas id="GeeksforGeeks" width="200" height="100" style="border:1px solid black"> </canvas> </body> </html>

Syntax

<canvas id = "script"> Contents... </canvas>

Note: The <canvas> tag is new in HTML5.

Attributes

The <canvas> tag accepts two attributes which are described below:

Attributes

Descriptions

height

This attribute is used to set the height of the canvas by taking the value in pixels and its default value is 150.

width

This attribute is used to set the width of the canvas by taking the value in pixels and its default value is 300.

Use canvas tag with JavaScript

HTML <!DOCTYPE html> <html> <body> <canvas id="geeks" height="200" width="200" style="border:1px solid black"> </canvas> <script> letc=document.getElementById("geeks"); letcx=c.getContext("2d"); cx.beginPath(); cx.arc(100,100,90,0,2*Math.PI); cx.stroke(); </script> </body> </html>

More Example

HTML <!DOCTYPE html> <html> <body> <canvas id="geeks" width="200" height="200" style="border:1px solid black"> </canvas> <script> letc=document.getElementById("geeks"); letcx=c.getContext("2d"); letgrd=cx.createRadialGradient (100,100,5,100,100,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"green"); cx.fillStyle=grd; cx.fillRect(0,0,200,200); </script> </body> </html>

HTML <canvas> Tag – FAQs

How do you draw on the <canvas> tag?

You draw on a <canvas> using JavaScript, typically by accessing the rendering context with getContext(‘2d’) or getContext(‘webgl’) for 3D graphics.

What is the default size of the <canvas> tag?

The default size of the <canvas> element is 300 pixels wide and 150 pixels high. You can change this using the width and height attributes.

How do you set the dimensions of a <canvas> element?

You can set the dimensions directly using the width and height attributes: <canvas width=”500″ height=”400″></canvas>.

What is the difference between the <canvas> tag and SVG?

The <canvas> tag is pixel-based and better suited for dynamic, real-time graphics. SVG is vector-based and better for scalable, static graphics.

Is the content inside the <canvas> tag accessible?

No, the content drawn on a <canvas> is not inherently accessible. You should provide alternative text content or descriptions to improve accessibility.

S

sheyakhare1999 Follow Improve Previous Article HTML caption Tag Next Article HTML center Tag

Similar Reads

What is the use of <canvas> Tag in HTML ? HTML <canvas> Tag allows you to create graphics, animations, and interactive content directly on a web page using JavaScript. It provides a drawing surface where you can use various JavaScript functions to create dynamic and visually appealing content. Here are key aspects of the <canvas> element: Drawing Area: The <canvas> is lik 1 min read Which tag is used to represent progress of a task in HTML & how is it different from <meter> tag ? In this article, we will see which tag is used to represent the progress of a task in HTML. To represent the progress of a task, we will use the <progress> tag. This tag is used to represent the progress of a task. It is also defined how much work is done and how much is left. Syntax: <progress attributes...> </progress> Attribute 2 min read Is container tag same as the empty tag in HTML? If not, why ? In this article, we will see the container tag & empty tag in HTML, along with knowing how they're different from each other. The Container tag is not the same as the empty tag & these are two different categories of tags used in HTML. Container tag: This tag contains 3 parts, namely, the opening tag, content that will be displayed in the b 5 min read Why <big> tag is not in HTML5 while <small> tag exists ? The <big> tag was discontinued in HTML5 while <small> tag is still in handy because <small> tag is frequently used to represent small prints like footnotes, copyright notices, comments etc. Many alternatives for <big> tag are already available such as <h1>, <h2> and so on. In HTML5 instead of using <big>, y 2 min read Explain the difference between head Tag and header Tag in HTML5 ? The <head> element is a container for metadata and is placed between the <html> and <body> tags. The <header> is for the main content section's introductory elements, like headings or logos and it mainly focuses on what appears at the top of the webpage. <head> ElementThe <head> element is part of the HTML docume 1 min read What is the difference between the <br> Tag and the <p> Tag ? The <br> tag is used to insert a line break, creating a new line within text or content. It doesn't have a closing tag and is a self-closing tag. On the other hand, the <p> tag defines a paragraph, separating blocks of text. It has an opening <p> and a closing </p> tag, allowing for the structured organization of text into p 2 min read Difference between <article> tag and <section> tag Both the tags are semantics in HTML 5. In this article, we will discuss about the <article> and <section> tag. Both the <article> and <section> tags are represented similarly but used for some meaning, that meaning is for the browsers and the developers. Both tags can replace each other as there will be no changes to the out 4 min read What purpose does a <script> tag serve inside of a <noscript> tag? Usage of NoScript tag: The tag defines alternate content that will be displayed if the user has disabled script or browser does not support script. It can be used inside both <head> and <body> tag. Syntax: <noscript> Contents... </noscript> Example: [GFGTABS] HTML <html> <head> <title>wbr Tag</title> 1 min read HTML Canvas Basics In this article, we will know HTML Canvas Basics, and their implementation through the examples. The HTML "canvas" element is used to draw graphics via JavaScript. The "canvas" element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and addi 4 min read How to resize an image in an HTML 5 canvas ? The canvas element is part of HTML 5 and it allows the rendering of 2D shapes and bitmap(also called "raster") images. A canvas actually has two sizes: the size of the element. the size of the element's drawing surface. The element's width and height attributes set both the size of the element and the size of the element's drawing surface. CSS attr 1 min read HTML canvas lineWidth Property The HTML canvas lineWidth property is used to set or return the width of the line (thickness of the line). The width of the line is set in terms of pixels. The default value of this property is 1. Syntax: context.lineWidth = number; Property Values: number: This property value indicates the number which specifies the line width in terms of pixels. 2 min read HTML canvas textAlign Property The HTML canvas textAlign Property is used to set or return the current alignment for text content, according to the anchor point. Basically, the text will start at that position and the text will end at that specified position. Syntax: context.textAlign="center | end | left | right | start"; Property Values: start: It has a Default. The text start 2 min read HTML canvas font Property The HTML canvas font Property is used to change the present font family of the Text content of the <canvas> element. The font Property has a Default Property i.e 10px sans-serif Syntax: context.font="italic small-caps bold 12px arial"; Property Values: font-family: It is used to set the font type of an HTML element. It holds several font name 2 min read HTML canvas lineJoin Property The HTML canvas lineJoin property is used to set or return the type of corner created, when two lines meet, by using the lineJoin property. The type of join can have one of three styles: bevel, round, or miter. However, the join style has generally miter style. Syntax: context.lineJoin = "bevel|round|miter"; Property Values: miter: It is the defaul 2 min read HTML DOM Canvas Object The DOM Canvas Object is used to represent the HTML <Canvas> element. The <canvas> tag is used to draw graphics in the document using javascript. It is new in HTML5. The canvas element is accessed by getElementById(). Syntax: accessed by getElementById("id"). Where “id” is the ID assigned to the Canvas tag. Example 1: In this example, w 2 min read HTML Canvas Draw Bezier Curve Curves on HTML canvas can be drawn using arcs, but drawing a complex diagram using arcs is quite a tedious task. In the given circumstance, Bezier curve will be very useful in providing more flexibility in drawing curves. Bezier curves on HTML canvas are drawn using a start point, one or more control point/points and an endpoint. Example: In the ca 4 min read How to get Pixel from HTML Canvas ? To get the pixel of any specific portion from the HTML canvas you can use the HTML canvas getImageData() Method. The getImageData() method usually returns an ImageData object that contains the pixel information of the specified object on the HTML canvas. Example 1: This example will display each pixel value of the square box. The boxes color is lin 3 min read HTML canvas shadowColor Property The Canvas shadowColor property is used to set or returns the color that is used for shadows. The fillStyle property is used to create shadows. This property can be set to a string representing a CSS color value, which we want as shadow color. By default, shadow color is set to black (CSS color value #000000). Syntax:: context.shadowColor = color; 2 min read HTML canvas rect() Method The rect() method in HTML is used to create a rectangle in HTML. Syntax: context.rect(x, y, width, height) Parameters: x: It stores the x-coordinate of the top-left corner of the rectangle.y: It stores the y-coordinate of the top-left corner of the rectangle.width: It stores the width in pixel.height: It stores the height in pixel. Example-1: C/C++ 1 min read HTML canvas fillStyle Property The canvas fillStyle property is used to set or return the color, gradient, or pattern used to fill the drawing. Style: context.fillStyle=color|gradient|pattern; Property Value: color: It is used to set the filled color of the drawing. The default value of the canvas fillStyle property is black.gradient: It is used to set the gradient object to fil 2 min read HTML canvas strokeStyle Property The canvas strokeStyle property is used to set or return the stroke of color, gradient, or pattern used in the drawing. Syntax: context.strokeStyle=color|gradient|pattern; Property Value: color: It is used to set the filled color of drawing. The default value of canvas fillStyle property is black.gradient: It is used to set the gradient object to f 2 min read HTML canvas clearRect() Method The clearRect() method is used to clear the specified pixels within a given rectangle. Syntax: context.clearRect( x, y, width, height ) Parameters: x: It stores the x-coordinate of the top-left corner of the rectangle.y: It stores the y-coordinate of the top-left corner of the rectangle.width: It stores the width in pixel.height: It stores the heig 1 min read HTML canvas strokeRect() Method The strokeRect() method is used to draw the rectangle in a given color. The default color of the stroke is black. Syntax: context.strokeRect(x, y, width, height) Parameters: x: It stores the x-coordinate of the top-left corner of the rectangle.y: It stores the y-coordinate of the top-left corner of the rectangle.width: It stores the width in pixels 1 min read HTML canvas fillRect() Method The fillRect() method is used to fill the rectangle using the given color. The default color of the fillRect() method is black. Syntax: context.fillRect( x, y, width, height ) Parameters: This method accepts four parameters as mentioned above and described below: x: It stores the x-coordinate of top-left corner of rectangle.y: It stores the y-coord 1 min read HTML canvas shadowBlur Property The canvas shadowBlur property is used to set or return the blur level for shadows. Syntax: context.shadowBlur=number Property: number: It is used to set the blur level for the shadow. Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; HTML canvas shadowBlur Property &lt;/title 1 min read HTML canvas shadowOffsetX Property The canvas shadowOffsetX property is used to set or return the horizontal distance of the shadow from the shape. This property holds a positive or negative value where a positive value indicates the shadow to the right and negative value indicates the shadow to the left. Syntax: context.shadowOffsetX=number Property Values: number: It is used to se 1 min read HTML canvas fill() Method The canvas fill() Method is used to fill the current drawing path. The default color of the canvas fill() method is black. Syntax: context.fill() Example-1: C/C++ Code <!DOCTYPE html> <html> <head> <title> HTML canvas fill() Method </title> </head> <body> <canvas id="GFG" width="500" 1 min read HTML canvas stroke() Method The canvas stroke() method is used to draw the path you have defined with all those moveTo() and lineTo() methods. The default color of the canvas stroke() method is black. Syntax: context.stroke() Example-1: C/C++ Code <!DOCTYPE html> <html> <head> <title> HTML canvas stroke() Method </title> </head> <body 1 min read HTML <canvas> width Attribute The HTML <canvas> width Attribute is used to specify the width of the <canvas> in terms of pixels. Syntax: <canvas width="pixels"> Attribute Values: It contains the value i.e pixels which specify the width of the canvas in terms of pixel. It has a Default value which is 300. Example: This Example illustrates the use of width attri 1 min read HTML <canvas> height Attribute The HTML <canvas> height Attribute is used to specify the height of the <canvas> element in terms of pixels. Syntax: <canvas height="pixels"> Attribute Values: It contains single value pixels which specify the height of the canvas in terms of pixel. It has a Default value which is 150. Example: This example illustrates the use of 1 min read Article Tags :
  • HTML
  • Technical Scripter
  • Web Technologies
  • HTML-Tags
Like three90RightbarBannerImg Explore More We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy Got It ! Lightbox Improvement Suggest changes Suggest Changes Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal. geeksforgeeks-suggest-icon Create Improvement Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all. geeksforgeeks-improvement-icon Suggest Changes min 4 words, max CharLimit:2000

What kind of Experience do you want to share?

Interview Experiences Admission Experiences Career Journeys Work Experiences Campus Experiences Competitive Exam Experiences

Từ khóa » Html Canvas