Create a Paint clone using HTML CSS & JavaScript

In this article, we will see how we can create a simple paint clone using HTML, CSS, and JavaScript. Users will be able to draw, change colors, adjust brush size, erase, and clear the canvas.

Preview of final output: Let us have a look at how the final output will look like

Prerequisites:

• HTML
• CSS
• JavsScript

Approach:

• Begin by setting up the HTML. We create a canvas inside the <canvas> tag that will act like a white board in our paint clone.
• Then we create the “tools” container that will hold our painting tools like: brush size, color picker, brush, eraser, clear screen buttons.
• Style the canvas and the buttons so the the UI look more appealing. Give proper padding, margin and background color(of your choice).
• In JavaScript, we begin by taking the HTML references and then proceed to initializing the height, width and other appearances of the canvas.
• We then start creating the functions that will make our paint app functional.
• startPosition() and endPosition() defines the staring and ending points of the drawing, while the draw() function is continuously called while we move the mouse on the screen, drawing lines on the canvas.
• Various event listeners are added to listen to the mouse actions and button clicks.
• A function updateBrushSizeLabel() is created to adjust the size of the brush.
• Finally the activatePen() and activateEraser() functions are created that helps in creating the state from pen to eraser and vice versa.

Example: Below is the implementation of the above approach

Javascript

//magic.js
//Obtain the canvas and its 2d rendering context
const canvas =
    document.getElementById('canvas');
const ctx =
    canvas.getContext('2d');

//Get the refernce to HTML elements
const brushSize =
    document.getElementById('brush-size');
const colorPicker =
    document.getElementById('color-picker');
const clearCanvas =
    document.getElementById('clear-canvas');
let isDrawing = false;

//Initializing the canvas
canvas.width =
    window.innerWidth - 40;
canvas.height =
    window.innerHeight * 0.85;
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';

//start drawing
function startPosition(e) {
    isDrawing = true;
    draw(e);
}

//end drawing
function endPosition() {
    isDrawing = false;
    ctx.beginPath();
}

//Function to draw on the Canvas
function draw(e) {
    if (!isDrawing) return;
    ctx.strokeStyle =
        colorPicker.value;
        //pick the color
    ctx.lineWidth =
        brushSize.value;
        //Select the brush size
    ctx.lineTo(
        e.clientX - canvas.offsetLeft,
        e.clientY - canvas.offsetTop
    );
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(
        e.clientX - canvas.offsetLeft,
        e.clientY - canvas.offsetTop
    );
}

//event listener for differnt mouse actions
canvas
    .addEventListener('mousedown', startPosition);
canvas
    .addEventListener('mouseup', endPosition);
canvas
    .addEventListener('mousemove', draw);
clearCanvas
    .addEventListener('click', () => {
        ctx.clearRect(
            0, 0, canvas.width,
            canvas.height
        );
    });

brushSize.addEventListener('input', () => {
    ctx.lineWidth =
        brushSize.value;
    updateBrushSizeLabel(brushSize.value);
});

function updateBrushSizeLabel(size) {
    const brushSizeLabel =
        document.getElementById('brush-size-label');
    if (brushSizeLabel) {
        brushSizeLabel.textContent =
            `Brush Size: ${size}`;
    }
}

//Get references to the pen and eraser button
const penButton =
    document.getElementById('pen');
const eraserButton =
    document.getElementById('eraser');

//switing to pen mode
function activatePen() {
    ctx.globalCompositeOperation =
        'source-over';
    ctx.strokeStyle =
        colorPicker.value;
}

//switching to eraser mode
function activateEraser() {
    ctx.globalCompositeOperation =
        'destination-out';
    ctx.strokeStyle =
        'rgba(0, 0, 0, 0)';
}

penButton
    .addEventListener('click', () => {
    activatePen();
});

eraserButton
    .addEventListener('click', () => {
    activateEraser();
});

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Paint Clone</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="paint-clone">
        <canvas id="canvas"></canvas>
        <div class="paint-tools">
            <input type="range"
                id="brush-size" min="1"
                max="50" value="5">
            <input type="color"
                id="color-picker">
            <button id="pen">
                Pen
            </button>
            <button id="eraser">
                Eraser
            </button>
            <button id="clear-canvas">
                Clear
            </button>
        </div>
    </div>
    <script src="./script.js"></script>
</body>

</html>

CSS

/* style.css */

canvas {
    border: 2px solid black;
    cursor: crosshair;

}

.paint-tools {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    max-width: 500px;
    align-items: center;
}

#brush-size {
    padding: 10px;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
}

#pen {
    padding: 10px;
    background-color: #0800ff;
    color: white;
    border: none;
    cursor: pointer;
}

#eraser {
    padding: 10px;
    background-color: #ee00cf;
    color: white;
    border: none;
    cursor: pointer;
}

#color-picker {
    cursor: pointer;
}

#clear-canvas {
    padding: 10px;
    background-color: #ff3333;
    color: white;
    border: none;
    cursor: pointer;
}

Output:

Output