# Put P5js Canvas in the web page (support CSS and responsive)

**URL:** <https://discourse.processing.org/t/put-p5js-canvas-in-the-web-page-support-css-and-responsive/32280>\
**Category:** Gallery\
**Created:** [September 16, 2021, 3:46am UTC](https://discourse.processing.org/t/put-p5js-canvas-in-the-web-page-support-css-and-responsive/32280 "2021-09-16T03:46:04Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![niuuin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/niuuin/32/7517_2.png) [@niuuin](https://discourse.processing.org/u/niuuin)\
**Post date:** [September 16, 2021, 3:46am UTC](https://discourse.processing.org/t/put-p5js-canvas-in-the-web-page-support-css-and-responsive/32280/1 "2021-09-16T03:46:04Z")

</div>

I wanted to have the P5js canvas as an element in the page and support CSS and responsive, rather than filling the whole screen as usual.

Here are the steps I took to solve the problem, I hope it helps.

## Step\_01 Putting P5js canvas into HTML

 ![Snipaste_2021-09-16_10-18-07](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/98d266ee03ef063859f6dcaa251759263f407047.png)  
[Test code\_01](https://jsfiddle.net/niuuin/1jhe5xua/45/)

CSS adjustment of element width is not yet supported at this time, when opening CSS in

```css
canvas {
  max-width: 100%;
}

.content {
  width: 50%;
  margin: 0 auto;
}

```

 ![Snipaste_2021-09-16_10-23-18](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/00ee327aa7cce8a6a7b3c9dbc9274964be9a8f14.png)  
The drawing board will be squeezed and deformed.

## Step\_02 Solve the problem created by CSS when adjusting the width

 ![Snipaste_2021-09-16_11-04-05](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/85f3ad67e9f1b4743a22701f1c286bfffa5b1606.png)  
[Test code\_02](https://jsfiddle.net/niuuin/evnmjfod/56/)

## Step\_03 Responsive

![ezgif.com-gif-maker (14)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e1e0ee6fe7ce4ac6c2dfcce66178b4899d6842c5.gif)  
[Test code\_03](https://jsfiddle.net/niuuin/qysx3tvz/38/)