CODEWITHSUNDEEP
htmlcsscanvasp5.js
Arkadelic
Arkadelic

Reputation: 105

Rotating and scaling a script

I have a simple animation written in JavaScript using the p5.js library. I normally place scripts like these on the web using <script></script>, and place my canvas in the back using the CSS rules vertical-align: top; z-index: -1 the canvas of my animations normally scale dynamically, so no need for complicated CSS.

If if have a canvas with a fixed width and height (e.g. 600 x 400), is it possible to apply CSS 2D transforms like transform: translate(50px, 100px); transform: rotate(50px, 100px); to the entire canvas? And as a follow up question, how would I point my CSS at the script? Could I give the script it's own class? Or would I have to place the script inside a ?

Thanks!

Upvotes: 0

Views: 301

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

Yes, you can apply CSS and 2d transforms on a fixed size canvas element.

canvas {
  width: 600px;
  height: 400px;
  background: black;
  transform: translate(50px, 100px); transform: rotate(45deg);
}
<canvas></canvas>

Re: styling a script - you don't style the script element itself, as that never displays in the browser. What you would do is style any elements that the script creates. So say the script creates a <div class="createdByJS">hello world</div> to the page, you would then style it via .createdByJs { color: red; }.

Upvotes: 1

Related Questions