Creating and Resizing Canvas - HTML5 Canvas (Part - 1)
Tags: canvas, html, java, webdev
Published: 2024-03-25 20:54:46


Creating and resizing an HTML5 Canvas involves setting up the canvas element in your HTML file and handling resizing events using JavaScript. 
Below is a step-by-step guide on how to achieve this: 

### 1. Create Your HTML File:
Start by creating a new HTML file and open it in a text editor.
Write the boilerplate code in html file.


![Boilerplate code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/absp2n4c85tltgez2rbc.png)

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```

### 2. Adding the canvas element in the html file:
**<canvas>** is an HTML element introduced in HTML5. It provides a container for graphics, which can be drawn dynamically using JavaScript.

```
<canvas id="myCanvas"></canvas>
```
**id="myCanvas":** This attribute assigns an identifier to the canvas element. This ID is used to reference the canvas element in JavaScript code for manipulation and drawing.

![Adding <canvas> element in html file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gp85ccsx7m35l740symo.png)

### 3. Live Preview in the Browser:
Click on the **Go Live** at the bottom of the Visual Studio Code or you can double click on the html file to see the live preview of the browser.

![Click on the **Go Live**](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kcdhw13nsx1rotqtiy2.png)

**Note:** Make sure you already installed the **Live Server Extension**
If you haven't installed the Live Server Extension then you can install it from the extension store in VS Code.

At the left hand side click on the four square icon

![Extension Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b54czbyk2g07pkkrdy9d.png)

Now, search "Live Server" on the search bar

![Search Live Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qeu1zmyiprjqzyk32p40.png)

Click on the first one 

![Click Live Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2rc4e1q4b6efpcw4eny.png)

Click on the "Install" to install the Live Server Extension

![Live Server Extension ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3o50ic8csux2f9tr7cj5.png)

Live Preview in the Browser

![Live Preview in the Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0xhmrt2giwne610s057.png)

You saw nothing will be shown in the browser!!

### 4. Include the css in html for styling

```
<link rel="stylesheet" href="style.css">
```
**<link>:** This is an HTML element used to link external resources, such as stylesheets or icon sets, to the HTML document.
**rel="stylesheet":** This attribute specifies the relationship between the linked document and the current document. In this case, it indicates that the linked document is a stylesheet.
**href="style.css":** This attribute specifies the URL of the external resource being linked to. In this example, it points to a CSS file named "style.css" located in the same directory as the HTML document.

![ Include the css in html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uc29yft9n94hp5moy34t.png)

Now, style the canvas 

```
#myCanvas {
    border: 1px solid;
}
```
Applied the border to our canvas

![CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf3n4v1lp9zpy2cvqcyp.png)

Now, see the preview in the browser

![preview in the browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fywb18j1q9nrpzz9tkv5.png)

A rectangular box is visible now

Now, resize the height and width of canvas

```
#myCanvas {
    border: 1px solid;
    height: 400px;
    width: 500px;
}
```
sets the height of the canvas element to 400 pixels and the width of the canvas element to 500 pixels.

![Resize canvas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/li2ye5s3gzdw6ybdp46c.png)

Preview will be like this...

![Resized canvas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfnled4r4njfh4zs1fhx.png)

## Conclusion
By following these instructions, you have created an HTML5 Canvas element that adapts its size dynamically to the size. With this configuration, you may make canvas-based games or applications that are flexible and responsive.

Follow me on [Medium](https://medium.com/me/stories/public) and [LinkedIn](https://www.linkedin.com/in/shubhamnagar234/)