Skip to content

Courses
Tutorials
Practice
Contests

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

How to Set Table Cell Width & Height in HTML ?

How to Set the height and width of the Canvas in HTML5?

Last Updated : 06 Mar, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

The canvas element is a part of HTML5 which allows us for dynamic, scriptable rendering of 2D shapes and bitmap images, facilitating the creation of games, graphs, animations, and compositions.

To set the height and width of the canvas in HTML5, we can utilize the height and width attributes within the <canvas> tag, specifying pixel values to define the canvas dimensions.

Different Approaches to Set the height and width of Canvas in HTML5

Table of Content

Using HTML Attributes
Using CSS

1. Using HTML Attributes:

Using HTML attributes, specify the canvas dimensions by adding width and height attributes within the <canvas> tag, defining pixel values to establish the canvas size for rendering graphics in HTML5.

Syntax:

 <canvas width="300" height="300"> HTML Contents... </canvas>

Example: In this example, we use the canvas element with width and height attributes set to 300 pixels each.

HTML

<!DOCTYPE html> <html>     <body>         <h1 style="color:green">             Welcome To GeeksForGeeks         </h1>         <h1>             Canvas Height and Width Attributes         </h1>         <canvas id="Canvas"              width="300"              height="300"              style="border:3px solid">         </canvas>         <script>             let c = document.getElementById("Canvas");             let ctx = c.getContext("2d");             ctx.fillStyle = "Green";             ctx.fillRect(100, 100, 100, 100);         </script>     </body> </html>

Output:

Using HTML Attributes

2. Using CSS:

To set the height and width of a canvas in HTML5 using CSS, target the canvas element in CSS and apply the width and height properties, specifying pixel values to define the canvas dimensions.

Syntax:

  #myCanvas {         margin: 20px;         padding: 20px;         background: #ffffff;         border: 3px solid green;         width: 300px;         height: 190px;     }

Example: In this example we applies CSS styles to the canvas element with the ID "myCanvas," setting its width and height to 300px and 190px respectively, along with margin, padding, background, and border properties.

HTML

<!DOCTYPE html> <html> <style>     #myCanvas {         margin: 20px;         padding: 20px;         background: #ffffff;         border: 3px solid green;         width: 300px;         height: 190px;     } </style>  <body>     <h1 style="color:green">         Welcome To GeeksForGeeks     </h1>     <h1>         Canvas Height and Width      </h1>     <canvas id="myCanvas"></canvas> </body>  </html>

Output:

Using CSS

How to Set Table Cell Width & Height in HTML ?

portalpirate

Improve

Article Tags :

Web Technologies
HTML
HTML-Questions

Similar Reads

How to specify the width and height of the canvas using HTML ?

The <canvas> tag in HTML is used to draw graphics on web page using JavaScript. It can be used to draw paths, boxes, texts, gradient, and adding images. By default, it does not contain borders and text. Syntax: <canvas id="canvasID"> HTML Contents... <canvas> Attributes: The canvas

How to specify the width and height of the object in HTML5?

The <object> tag is used to display multimedia like audio, videos, images, PDFs, and Flash in web pages. It can also be used for displaying another webpage inside the HTML page. The <param> tag is also used along with this tag to define various parameters. Any text that is written within

How to set the height and width of the video player in HTML5 ?

In this article, we will learn to set the width and height of the video player in HTML5. The following are the two scenarios The width and height of the video are fixed.Make the video respond to your screen width. Approach: The HTML5 width and height attributes of the video tag are used to set the h

How to Set Width and Height of an Image using HTML?

When adding images to a webpage, it's important to set their dimensions using the height and width attributes in HTML. Without these dimensions, the browser won't know how much space to reserve for the image, which can cause layout shifts that disrupt the viewing experience. Note: Always specify the

How to Set Table Cell Width & Height in HTML ?

In HTML, we can control the width and height of table cells using various approaches. This article discusses different methods to set the width and height of table cells in HTML. Table of Content Using inline StyleUsing width and height attributesUsing Inline StyleIn this approach, we are using the

How to Set Height and Width of a Chart in Chart.js ?

Chart.js is a popular JavaScript library that allows developers to create interactive and visually appealing charts for web applications. One of the key aspects of chart customization is controlling its dimensions. In this article, we'll explore how to set the height and width of a Chart.js chart. C

How to find the height of a text in HTML canvas using JavaScript ?

In this article, we will find the height of the text canvas using JavaScript. We have two approaches to find the height of a text in HTML canvas using JavaScript which are described below: Approach 1: In the following example, the height attribute of the HTML canvas is used. First set the font in pt

How to draw with mouse in HTML 5 canvas ?

In this article, we shall explore a few ways to draw with the mouse pointer on the HTML 5 canvas. The HTML canvas is essentially a container for various graphics elements such as squares, rectangles, arcs, images, etc. It gives us flexible control over animating the graphics elements inside the canv

How to use the canvas drawImage() method in HTML5 ?

The canvas drawImage() method of the Canvas 2D API is used to draw an image in various ways on a canvas element. This method has additional parameters that can be used to display the image or a part of the image. Syntax: context.drawImage(img, x, y, swidth, sheight, sx, sy, width, height); Approach:

How to Set Viewport Height & Width in CSS ?

Set viewport height and width in CSS is essential for creating responsive and visually appealing web designs. We'll explore the concepts of setting viewport height and width by using various methods like CSS Units, Viewport-Relative Units, and keyframe Media Queries. Table of Content Setting viewpor

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

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

Improvement

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 Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences