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

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

Test code_01

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

canvas {
  max-width: 100%;

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

The drawing board will be squeezed and deformed.

Step_02 Solve the problem created by CSS when adjusting the width

Test code_02

Step_03 Responsive

ezgif.com-gif-maker (14)
Test code_03

1 Like