HTML 5 canvas javascript integration

Community resources Webflow Tips
1

Hello, I’ve been playing around with adding the canvas javascript to my site and I came across this resource of canvas examples. Could anyone help me translate these code examples to the webflow interface?

Thanks!

2

Hi Lynn,
Welcome to the forum :webflow_heart:

Codepen is devided into 3 sections:

  1. HTML - which in Webflow is the elements you use from your left hand Elements Panel.
  2. CSS - in Webflow this translates to the properties you give to each element in the right hand style panel.
  3. Script (in this case JavaScript) - which in Webflow you copy and paste into a custom code element or in the page/project’s settings.

So, create a page, with similar <body> properties.
Add an embed code item with the <canvas> line in it (since Webflow does not have a native canvas element.
Paste the script in one of the locations wrapped with <script> tag at the beginning and </script> tag at the end.

That will do the job :slight_smile:

3

This is very helpful. Thanks so much!