​

​

​

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.