πŸŽ‡ Wave your flag


​

​

​

We're rolling into a holiday week in the US. If you need an animated American flag to celebrate, look no further.

But! We have users from all over the world. For those outside of the US, try updating the code to make an animated flag of your country (hint: use AI). If you make one, please share. We'll get it added to the Community Library.

πŸ‡ΊπŸ‡Έ Render and animate an American flag on a canvas with dynamic waving effects.

​https://slater.app/community_library/american-flag-a0bc5d89-a5cd-4910-a245-db0274d495f3​

From Jared Malan​​

​

β€‹πŸ—‚οΈ Script for a hover-based tab interface with dynamic content display.

​https://slater.app/community_library/tabs-switch-on-hover-6bbca64b-b43b-4119-883c-60b02e3673cf​

From Andrea Morgan ​

​

πŸ“– Toggle visibility of text sections with "Read More" buttons

​https://slater.app/community_library/expand-text-on-click-d8dd845f-ee47-4c37-b884-467b9da2bbed​

From Andrea Morgan ​

​

​

​Javascript 101: Javascript and Canvas

In the animated flag script, we leverage the <canvas> element. Do you know why we have a <canvas> element?

Apple first introduced the <canvas> element in Safari in 2004 as part of the Mac OS X WebKit framework. It was designed to allow developers to draw 2D graphics programmatically using JavaScript. The idea was to support applications like the iPhone's Dashboard widgets, which required dynamic, scriptable graphics.

A short time later, other browsers became interested in the technology and the W3C (World Wide Web Consortium) took over to provide a formal standard.

Let's look at some basics for interacting with the <canvas>:

1. Add a canvas to your Webflow project:

<canvas id="myCanvas" width="600" height="400" style="border:1px solid #000000;"></canvas>

​

2. Access the canvas with JavaScript

// Access the canvas element
const canvas = document.getElementById('myCanvas');

// Get the 2D drawing context
const ctx = canvas.getContext('2d');

The getContext('2d') method returns a drawing context on the canvas, which provides methods and properties for drawing.

​

3. Draw on the Canvas

Now, you can use the ctx object to draw shapes, text, images, and more. Here are some basic drawing examples:

Draw a Rectangle

// Set fill color to blue
ctx.fillStyle = '#0000FF';

// Draw a filled rectangle
ctx.fillRect(50, 50, 150, 100);

​

Draw a Line

// Set stroke color to red
ctx.strokeStyle = '#FF0000';

// Begin a new path
ctx.beginPath();

// Move the pen to (50, 200)
ctx.moveTo(50, 200);

// Draw a line to (200, 200)
ctx.lineTo(200, 200);

// Stroke the path
ctx.stroke();

​

Draw a Circle

// Set fill color to green
ctx.fillStyle = '#00FF00';

// Begin a new path
ctx.beginPath();

// Draw an arc (x, y, radius, startAngle, endAngle, anticlockwise)
ctx.arc(300, 150, 50, 0, 2 * Math.PI);

// Fill the circle
ctx.fill();

​

Draw Text

// Set font properties
ctx.font = '30px Arial';

// Set text color to black
ctx.fillStyle = '#000000';

// Draw the text
ctx.fillText('Hello Canvas!', 50, 300);

​

That's the basics. Try experimenting with different shapes and methods to get comfortable with the Canvas API. Maybe generate a flag. :)

​

Your projects, supported by Slater

Over the last couple of emails, we discussed code that was used for https://www.sequoiacap.com/trainingdata/. It's live. Check it out.

​

Happy coding!

πŸ€™ the Slater Team

​

If Slater helps you create better websites, please support the team behind it.

Welcome To Slater!

Slater resources, updates and community activity

Read more from Welcome To Slater!

We're back from a company-wide summer pause (or winter pause for our Southern Hemisphere team members). Edgar Allan is hitting it's numbers! Let's look at some new Community Library scripts: πŸ‘€ Dynamically loads HTML content based on a random number. This is a quick script we wrote to give a dynamic intro into a soon-to-be-released https://edgarallan.com. https://slater.app/community_library/random-content-aee7f7f2-3ab8-4e6f-887e-ea54cad0ebbf From Jared Malan ✍️ Create a variable for your...

We're adding new community library scripts each week. Let's take a look at some of them. πŸ‘Ύ An interactive swarm Create a dynamic grid of squares that react to mouse movement, simulating a swarm-like effect (is it a swarm?). This code is the scaled back version of something we did for a client. We'll show you the finished experience once that projects launches. Play with the example: https://slater-original.webflow.io/swarm Review the code:...

We launched the Community Library this week. Let's highlight some of the useful resources. πŸ–¨οΈ Copy to Clipboard Copy text to clipboard on button click with visual feedback. https://slater.app/community_library/copy-to-clibboard-41c30ebc-180e-4e9d-b747-f427f1f05151 πŸ‘» Reveal Words on Scroll Animate text on scroll with GSAP, ScrollTrigger, and SplitType. https://slater.app/community_library/text-by-words-with-scroll-b0810bf3-64b6-40a4-b5ad-46c784fdcc76 πŸ›€ Remove https:// From Text Link Remove...