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

[niuuin]

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

Test code_03