Javascript 101: Javascript and Canvas

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. :)