Today, I want to share an exciting code snippet that allows you to create a futuristic canvas using JavaScript and the popular Google font, Exo 2. With this code, you can create an impressive visual effect on your webpage and capture visitors’ attention. Let’s take a look at how it works!
Exo 2 is a contemporary geometric sans serif typeface designed to convey a technological and futuristic feeling while maintaining an elegant simplicity.
HTML Setup
First, we need to create an HTML canvas where we will draw our futuristic design. In the code below, we create a canvas and place it in the body of the webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Futuristic Canvas</title>
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="script.js"></script>
</body>
</html>JavaScript Code
Now, we create a JavaScript file (script.js) to handle the canvas drawing and animation. This code will generate random characters and colors to create an interesting visual effect.
// Create a canvas and append it to the body
var futuristicCanvas = document.createElement("canvas");
document.body.appendChild(futuristicCanvas);
// Set canvas size to the window size
futuristicCanvas.width = window.innerWidth;
futuristicCanvas.height = window.innerHeight;
// Get the rendering context
var ctx = futuristicCanvas.getContext("2d");
// Create an array of random characters and colors
var characters = ["0", "1", "A", "B", "C", "D", "E", "F"];
var colors = ["#ff4081", "#00e676", "#00b0ff", "#f9c22e", "#aa00ff", "#ff3d00"];
// Function to draw the coded text
function drawCode() {
// Clear the canvas
ctx.clearRect(0, 0, futuristicCanvas.width, futuristicCanvas.height);
// Set background color to black
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, futuristicCanvas.width, futuristicCanvas.height);
// Set the font for the characters
ctx.font = "20px 'Exo 2', sans-serif";
// Loop through and draw random characters with random colors
for (var x = 0; x < futuristicCanvas.width; x += 20) {
for (var y = 0; y < futuristicCanvas.height; y += 20) {
var character = characters[Math.floor(Math.random() * characters.length)];
var color = colors[Math.floor(Math.random() * colors.length)];
ctx.fillStyle = color;
ctx.fillText(character, x, y);
}
}
}
// Update canvas size on window resize
window.addEventListener("resize", function () {
futuristicCanvas.width = window.innerWidth;
futuristicCanvas.height = window.innerHeight;
drawCode();
});
// Draw the coded text on page load
window.addEventListener("load", function () {
drawCode();
});In the code above:
- We create a canvas and append it to the document body.
- We set the canvas size to match the window size.
- We define arrays for random characters and colors.
- The
drawCodefunction clears the canvas, sets the background to black, and draws random characters in random colors using the “Exo 2” font from Google Fonts. - We add event listeners to update the canvas size on window resize and to draw the code when the page loads.
Conclusion
Try adding this code to your webpage and let visitors experience a futuristic canvas with the modern and stylish Exo 2 font. Experiment with different characters and colors to create your own unique futuristic design!
Thank you for reading!
