Thiết kế website giá rẻ

Question

I made a website using HMTL,TAILWIND CSS AND JAVASCRIPT which allows us to draw and download that , it is working fine on my desktop but is not allowing me to draw using on my mobile(JavaScript is enabled)
here is the HTML CODE

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quick Sign</title>
    <link rel="stylesheet" href="./src/output.css">
</head>

<body>
    <div class="bg-white">
        <div class="flex flex-col md:flex-row justify-evenly py-5">
            <div class="flex-col items-center mb-4 md:mb-0">
                <p class="font-bold">Text Color Picker</p>
                <input type="color" id="tcp" class="w-32 h-10 rounded-md">
            </div>
            <div class="flex-col items-center mb-4 md:mb-0 pr-5">
                <p class="font-bold">Background Color Picker</p>
                <input type="color" id="bcp" class="w-44 h-10 rounded-md">
            </div>
            <div class="flex-col items-center">
                <p class="font-bold">Font Size</p>
                <select id="fontsize" class="border-black border-2 h-8">
                    <option value="5">5px</option>
                    <option value="10">10px</option>
                    <option value="15">15px</option>
                    <option value="20">20px</option>
                </select>
            </div>
        </div>
        <div class="flex justify-center">
            <canvas class="canvas border-solid border-2 border-black" id="mycanvas" width="800" height="500"></canvas>
        </div>
        <div class="flex flex-col md:flex-row justify-around py-2">
            <button type="button" class="bg-lime-500 hover:bg-lime-700 text-white font-bold py-2 px-4 rounded mb-2 md:mb-0" id="save">Save & Download</button>
            <button type="button" class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded mb-2 md:mb-0" id="clrbtn">Clear</button>
            <button type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" id="retrieve">Retrieve Saved Signature</button>
        </div>
    </div>
    <script src="index.js"></script>
</body>

</html>

Here is the JavaScript code

const colorPicker = document.getElementById('tcp');
const BGcolorPicker = document.getElementById('bcp');
const canvas = document.getElementById('mycanvas');
const clearButton = document.getElementById('clrbtn');
const saveButton = document.getElementById('save');
const retrieveButton = document.getElementById('retrieve');
const fontPicker = document.getElementById('fontsize');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;

function draw(x, y) {
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(x, y);
    ctx.stroke();
    lastX = x;
    lastY = y;
}

// Desktop mouse events
canvas.addEventListener('mousedown', (event) => {
    isDrawing = true;
    lastX = event.offsetX;
    lastY = event.offsetY;
});

canvas.addEventListener('mousemove', (event) => {
    if (isDrawing) {
        draw(event.offsetX, event.offsetY);
    }
});

canvas.addEventListener('mouseup', () => {
    isDrawing = false;
});

canvas.addEventListener('mouseout', () => {
    isDrawing = false;
});

// Mobile touch events
canvas.addEventListener('touchstart', (event) => {
    const touch = event.touches[0];
    isDrawing = true;
    lastX = touch.clientX - canvas.offsetLeft;
    lastY = touch.clientY - canvas.offsetTop;
});

canvas.addEventListener('touchmove', (event) => {
    event.preventDefault();
    if (isDrawing) {
        const touch = event.touches[0];
        draw(touch.clientX - canvas.offsetLeft, touch.clientY - canvas.offsetTop);
    }
});

canvas.addEventListener('touchend', () => {
    isDrawing = false;
});

colorPicker.addEventListener('change', (event) => {
    ctx.strokeStyle = event.target.value;
    ctx.fillStyle = event.target.value;
});

BGcolorPicker.addEventListener('change', (event) => {
    ctx.fillStyle = event.target.value;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
});

fontPicker.addEventListener('change', (event) => {
    ctx.lineWidth = event.target.value;
});

clearButton.addEventListener('click', () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

saveButton.addEventListener('click', () => {
    localStorage.setItem('canvasContents', canvas.toDataURL());
    let link = document.createElement('a');
    link.download = 'my-sign.png';
    link.href = canvas.toDataURL();
    link.click();
});

retrieveButton.addEventListener('click', () => {
    let savedCanvas = localStorage.getItem('canvasContents');
    if (savedCanvas) {
        let img = new Image();
        img.src = savedCanvas;
        img.onload = () => {
            ctx.drawImage(img, 0, 0);
        };
    }
});

I just want the same functionality for mobile also

Thiết kế website giá rẻ

Danh mục

Adding a functionality to draw on mobile