Learn how to create a text-based drawing app using HTML, CSS, and JavaScript with this step-by-step guide. Build an interactive drawing application from scratch and unleash your creativity!
Table of Contents
Welcome to our step-by-step guide on creating a text-based drawing app using HTML, CSS, and JavaScript! In this tutorial, we will walk you through the process of building an interactive drawing application from scratch. Whether you're a beginner or an intermediate web developer, this guide will provide you with the necessary knowledge and skills to create your own text-based drawing app and unleash your creativity on the web.
Why create a text-based drawing app? Text-based art has gained popularity in recent years, allowing artists to express themselves using words and typography. By building a text-based drawing app, you can create unique and visually appealing designs using letters and words. Additionally, developing a drawing app will help you sharpen your HTML, CSS, and JavaScript skills, as you'll learn how to handle user input, implement interactivity, and manipulate elements on a web page.
To follow this guide, you should have a basic understanding of HTML, CSS, and JavaScript. Familiarity with concepts such as HTML elements, CSS styling, and JavaScript event handling will be beneficial. Don't worry if you're new to web development - we'll explain each step in detail, making it accessible for beginners.
Now, let's start making an amazing text-based drawing app using HTML, CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Code by: Tim Holman
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our drawing app.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's go through each part:
<!DOCTYPE html>: This declaration informs the web browser that the document is an HTML file.
<html lang="en">: The <html> tag is the root element of an HTML page. The lang attribute specifies the language of the document, in this case, English.
<head>: The <head> element contains metadata and other information about the web page, which is not displayed directly on the page itself.
<title>Drawing App</title>: The <title> element sets the title of the web page, which is displayed on the browser's title bar or tab.
<meta charset="UTF-8" />: This <meta> tag specifies the character encoding for the HTML document, ensuring that special characters and symbols are properly displayed.
<meta name="viewport" content="width=device-width" />: This <meta> tag sets the viewport configuration for mobile devices, ensuring that the width of the page adjusts to the device's screen width.
<link rel="stylesheet" href="styles.css" />: This <link> tag is used to include an external CSS file called "styles.css" that contains styling rules for the web page.
<body>: The <body> element contains the visible content of the web page.
<canvas id='canvas'></canvas>: The <canvas> element creates a rectangular area on the page that can be used for drawing graphics using JavaScript.
<span id='info'>Click and drag to draw!<span>: The <span> element is an inline container used to group text or other inline elements. In this case, it displays the text "Click and drag to draw!" on the page.
<script src="script.js"></script>: This <script> tag is used to include an external JavaScript file called "script.js" that contains the code for the drawing application.
This is the basic structure of our drawing app using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the drawing app is in place, the next step is to add styling to the drawing app using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our drawing app.
Here's an explanation of each part:
1. The first block of code applies styles to the <html> and <body> elements:
- width: 100%; sets the width of both the <html> and <body> elements to 100% of the viewport width.
- height: 100%; sets the height of both the <html> and <body> elements to 100% of the viewport height.
- margin: 0px; removes any margin space around the <html> and <body> elements.
- overflow: hidden; hides any content that exceeds the dimensions of the <html> and <body> elements, preventing scrolling.
2. The second block of code targets <span> elements that are children of <html> or <body> when the mouse hovers over them:
- display: none; hides the <span> elements when they are being hovered over. In other words, the text within the <span> elements will disappear when the mouse hovers over the page.
3. The next block of code targets <canvas> elements:
- cursor: crosshair; changes the cursor to a crosshair shape when it is over a <canvas> element. This is often used to indicate that the element is interactive or clickable.
4. The final block of code targets all <span> elements:
- font-family: 'Georgia', cursive; sets the font family of the <span> elements to "Georgia" or a cursive font if "Georgia" is not available.
- font-size: 40px; sets the font size of the <span> elements to 40 pixels.
- position: fixed; positions the <span> elements relative to the viewport, meaning they will stay in the same position even when the page is scrolled.
- top: 50%; sets the top position of the <span> elements to 50% of the viewport height.
- left: 50%; sets the left position of the <span> elements to 50% of the viewport width.
- color: #000; sets the color of the text within the <span> elements to black.
- margin-top: -40px; offsets the top position of the <span> elements by -40 pixels. This helps vertically center the elements by moving them up by half their height.
- margin-left: -200px; offsets the left position of the <span> elements by -200 pixels. This helps horizontally center the elements by moving them left by half their width.
This will give our drawing app an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
html, body {
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}
html:hover span, body:hover span {
display: none;
}
canvas {
cursor: crosshair;
}
span {
font-family: 'Georgia', cursive;
font-size: 40px;
position: fixed;
top: 50%;
left: 50%;
color: #000;
margin-top: -40px;
margin-left: -200px;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. This JavaScript code sets up a simple interactive drawing canvas on a webpage. It initializes variables and defines functions for handling mouse events and drawing on the canvas.
The code starts by defining various variables such as the initial position, counter, minimum font size, angle distortion, and a string of letters. It also creates variables for the canvas, its context, and the mouse position.
The init() function initializes the canvas and sets its size to match the window dimensions. It also adds event listeners for mouse movements, clicks, and window resizing.
The mouseMove() function updates the mouse position whenever there is a mouse movement and calls the draw() function.
The draw() function is responsible for drawing on the canvas. It checks if the mouse button is held down and calculates the distance between the current mouse position and the previous position. It determines the font size based on the distance and selects a letter from the string. It calculates the step size based on the width of the letter in the chosen font size.
If the distance is greater than the step size, it calculates the angle between the mouse position and the previous position. It sets the font and applies a rotation transformation to the canvas context. Then, it draws the letter in the transformed position.
The counter is incremented, and if it exceeds the length of the letters string, it wraps back to the beginning. The position is updated based on the angle and step size.
The distance() function calculates the Euclidean distance between two points.
The mouseDown() function sets the mouse state to "down" and updates the initial position to the current mouse position. It also hides an element with the ID "info".
The mouseUp() function sets the mouse state to "up".
The doubleClick() function clears the canvas by setting its width to itself.
The textWidth() function calculates the width of a given string of text at a specified font size.
Finally, the init() function is called to initialize the canvas and set up the event listeners.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
// Application variables
var position = { x: 0, y: window.innerHeight / 2 };
var counter = 0;
var minFontSize = 3;
var angleDistortion = 0;
var letters =
"There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and talking over its head. 'Very uncomfortable for the Dormouse,' thought Alice; 'only, as it's asleep, I suppose it doesn't mind.'";
// Drawing variables
var canvas;
var context;
var mouse = { x: 0, y: 0, down: false };
function init() {
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.addEventListener('mousemove', mouseMove, false);
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mouseout', mouseUp, false);
canvas.addEventListener('dblclick', doubleClick, false);
window.onresize = function (event) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
}
function mouseMove(event) {
mouse.x = event.pageX;
mouse.y = event.pageY;
draw();
}
function draw() {
if (mouse.down) {
var d = distance(position, mouse);
var fontSize = minFontSize + d / 2;
var letter = letters[counter];
var stepSize = textWidth(letter, fontSize);
if (d > stepSize) {
var angle = Math.atan2(mouse.y - position.y, mouse.x - position.x);
context.font = fontSize + 'px Georgia';
context.save();
context.translate(position.x, position.y);
context.rotate(angle);
context.fillText(letter, 0, 0);
context.restore();
counter++;
if (counter > letters.length - 1) {
counter = 0;
}
//console.log (position.x + Math.cos( angle ) * stepSize)
position.x = position.x + Math.cos(angle) * stepSize;
position.y = position.y + Math.sin(angle) * stepSize;
}
}
}
function distance(pt, pt2) {
var xs = 0;
var ys = 0;
xs = pt2.x - pt.x;
xs = xs * xs;
ys = pt2.y - pt.y;
ys = ys * ys;
return Math.sqrt(xs + ys);
}
function mouseDown(event) {
mouse.down = true;
position.x = event.pageX;
position.y = event.pageY;
document.getElementById('info').style.display = 'none';
}
function mouseUp(event) {
mouse.down = false;
}
function doubleClick(event) {
canvas.width = canvas.width;
}
function textWidth(string, size) {
context.font = size + 'px Georgia';
if (context.fillText) {
return context.measureText(string).width;
} else if (context.mozDrawText) {
return context.mozMeasureText(string);
}
}
init();Final Output:
Conclusion:
Congratulations on completing our step-by-step guide on creating a text-based drawing app using HTML, CSS, and JavaScript! By following this tutorial, you've gained valuable knowledge and skills in building interactive applications and unleashing your creativity on the web.
Throughout this guide, we covered the essential steps in creating a text-based drawing app. We started by setting up the project, creating the necessary HTML, CSS, and JavaScript files, and linking them together. Then, we built the app's structure, including the canvas element and drawing controls. We implemented text-based drawing functionality and added styling to customize the app's appearance. We also added interactivity by handling user input and implementing additional features.
Remember, this guide serves as a foundation for your text-based drawing app, and there are endless possibilities for further enhancements and customizations. You can explore adding more drawing tools, implementing advanced text manipulation features, or even integrating with external APIs for additional functionality.
To continue your web development journey, we encourage you to explore more advanced topics, such as responsive design, data storage and retrieval, and performance optimization. Online resources, tutorials, and coding communities are great places to expand your knowledge and learn from others.
Building a text-based drawing app is just one example of what you can achieve with HTML, CSS, and JavaScript. We hope this guide has inspired you to explore new possibilities and continue honing your web development skills. Happy coding and keep creating amazing text-based art!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
