Paint App using Bootstrap & JavaScript
Last Updated :
05 Aug, 2024
We will be building a simple paint application that lets you draw just like in MS-Paint. Through this article, we will learn how to implement and work with Canvas in JavaScript. Our app contains two sections, one for drawing and the other is a menu where the user can customize the brush color, width, and opacity. The user will be provided with a brush and draw on the canvas using that brush.
.jpg)
Prerequisites
Approach
The Paint App allows users to draw on a canvas using various brush settings. When the user interacts with the canvas, the app tracks mouse events to start, continue, and end drawing strokes. It captures the brush color, width, and opacity from input elements. Upon drawing, it updates the canvas context with the selected brush settings, such as color, width, and opacity. This process ensures that users can create drawings with customizable brush properties, providing a versatile and interactive painting experience on the web.
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Paint App</title>
<!-- Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles -->
<style>
.App {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}
h1 {
font-family: 'Lobster', cursive;
font-size: 50px;
color: #4644f0;
}
.draw-area {
width: 100%;
max-width: 100vw;
/* Ensure the width doesn't
exceed the viewport width */
height: auto;
border: 2px solid #808080;
position: relative;
background-color: white;
overflow-x: hidden;
/* Hide horizontal scrollbar */
}
.Menu {
width: 100%;
max-width: 100vw;
/* Ensure the width doesn't
exceed the viewport width */
height: 50px;
display: flex;
justify-content: space-evenly;
border-radius: 5px;
align-items: center;
background-color: #a3a3a32d;
margin: auto;
margin-top: 10px;
overflow-x: hidden;
/* Hide horizontal scrollbar */
}
/* Adjusted styles for responsiveness */
.Menu label {
font-size: 14px;
}
.Menu input[type="color"],
.Menu input[type="range"] {
width: 20%;
max-width: 100px;
}
</style>
</head>
<body>
<div class="App">
<h1>Paint App</h1>
<div class="draw-area">
<div class="Menu">
<label>Brush Color </label>
<input type="color" id="brushColor">
<label>Brush Width </label>
<input type="range" id="brushWidth" min="3" max="20">
<label>Brush Opacity</label>
<input type="range" id="brushOpacity" min="1" max="100">
</div>
<canvas id="canvas" width="1280" height="720"></canvas>
</div>
</div>
<!-- Bootstrap JS -->
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<!-- Custom JavaScript -->
<script>
document.addEventListener("DOMContentLoaded", function () {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const brushColor = document.getElementById('brushColor');
const brushWidth = document.getElementById('brushWidth');
const brushOpacity = document.getElementById('brushOpacity');
let isDrawing = false;
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mouseup', endDrawing);
canvas.addEventListener('mousemove', draw);
function startDrawing(e) {
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
isDrawing = true;
}
function endDrawing() {
ctx.closePath();
isDrawing = false;
}
function draw(e) {
if (!isDrawing) return;
ctx.lineTo(e.offsetX, e.offsetY);
ctx.strokeStyle = brushColor.value;
ctx.lineWidth = brushWidth.value;
ctx.globalAlpha = brushOpacity.value / 100;
ctx.stroke();
}
});
</script>
</body>
</html>
Output:
Create Paint App using Bootstrap & JavaScript
Similar Reads
Bootstrap 5 Offcanvas Usage Via JavaScript Bootstrap 5 Offcanvas can be triggered or used using two ways using data attributes and using JavaScript. For using it with JavaScript we need to add a function and use the predefined show() method to trigger the off-canvas from a button or link. PrerequisiteBootstrap 5 Offcanvas UsageBootstrap 5 of
3 min read
Build A Drawing App using JavaScript A drawing app that lets us draw shapes like triangles, circles, and rectangles which can be made using HTML, CSS, and JavaScript. We'll also have a brush tool to paint our drawings. With the shapes, we can create different designs, and with the brush, we can color them. We'll include a filled checkb
8 min read
How to create a web page using Bootstrap ? Bootstrap is an open-source CSS framework for creating a responsive and customizable frontend for websites and web applications. Using Bootstrap's grid system one can easily create a web page very fast. Any webpage these days needs to have a navbar for user navigation, some content & a form for
6 min read
How to create notes taking site using HTML, Bootstrap and JavaScript ? We are going to make a website that will take our notes and saves them for our future use using HTML, CSS and JavaScript .Prerequisite:Basic understanding of HTML, Bootstrap, and JavaScript.Approach:HTML: We will create the basic framework of the website using HTML.Bootstrap: makes our work easier a
2 min read
Create a Simple Color Picker using JavaScript It is quite easy to develop such a client-side application. The primary colors as we know are Red(R), Green(G), Blue(B) and by mixing them we can form any color that we want. In this article, we will learn to get the RGB value from the user and use CSS to form the color using RGB(red, green, blue)
3 min read
Design a Contact Page with a Map using Bootstrap We will design a Contact Page with a Map using Bootstrap. The Contact Page with the Map is useful and provides users with geographical context for finding your organization or the location more efficiently. Here, we will create the basic contact form for the user to fill out and the location of the
2 min read