Ad Code

Responsive Advertisement

Draw the Paint Drawings Logo's Letters characters Symbols and so on (HTML CSS jS)

 Draw the Paint Drawings Logo's Letters characters Symbols and so on (HTML CSS jS)





Preview :

starting no draw

after drawing



source code : 

HTML :

<!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" href="style.css" />
    <script src="main.js"></script>
</head>

<body>
    <div id='colors'>
        <button id='black' onclick='changeColor("black")' ontouchstart='changeColor("black")'></button>
        <button id='red' onclick='changeColor("red")' ontouchstart='changeColor("red")'></button>
        <button id='green' onclick='changeColor("green")' ontouchstart='changeColor("green")'></button>
        <button id='blue' onclick='changeColor("blue")' ontouchstart='changeColor("blue")'></button>
        <button id='orange' onclick='changeColor("orange")' ontouchstart='changeColor("orange")'></button>
        <button id='pink' onclick='changeColor("pink")' ontouchstart='changeColor("pink")'></button>
    </div>
    <canvas id='canvas' width='300' height='200'></canvas>
    <div>
        <button onclick='clearCanvas()'>Clear</button>
    </div>
</body>

</html>

CSS :

#canvas {
    border: 1px solid black;
    margin: 10px 0 10px 0;
    cursor: pointer;
}

#colors button {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin-top: 0px;
}

#black {
    background: black;
}

#pink {
    background: pink;
}

#red {
    background: red;
}

#green {
    background: green;
}

#blue {
    background: blue;
}

#orange {
    background: orange;
}

JAVASCRIPT :

var arr_touches = [];
var canvas;
var ctx;
var down = false; //mouse is pressed
var color = 'black'; //default drawing color
var width = 5; // drawing width


//calling window.onload to make sure the HTML is loaded
window.onload = function () {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    ctx.lineWidth = width;

    //handling mouse click and move events
    canvas.addEventListener('mousemove', handleMove);
    canvas.addEventListener('mousedown', handleDown);
    canvas.addEventListener('mouseup', handleUp);

    //handling mobile touch events
    canvas.addEventListener("touchstart", handleStart, false);
    canvas.addEventListener("touchend", handleEnd, false);
    canvas.addEventListener("touchcancel", handleCancel, false);
    canvas.addEventListener("touchleave", handleEnd, false);
    canvas.addEventListener("touchmove", handleTouchMove, false);
};
function handleMove(e) {
    xPos = e.clientX - canvas.offsetLeft;
    yPos = e.clientY - canvas.offsetTop;
    if (down == true) {
        ctx.lineTo(xPos, yPos); //create a line from old point to new one
        ctx.strokeStyle = color;
        ctx.stroke();
    }
}
function handleDown() {
    down = true;
    ctx.beginPath();
    ctx.moveTo(xPos, yPos);
}
function handleUp() {
    down = false;
}
function handleStart(evt) {
    var touches = evt.changedTouches;
    for (var i = 0; i < touches.length; i++) {
        if (isValidTouch(touches[i])) {
            evt.preventDefault();
            arr_touches.push(copyTouch(touches[i]));
            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.fill();
        }
    }
}
function handleTouchMove(evt) {
    var touches = evt.changedTouches;
    var offset = findPos(canvas);
    for (var i = 0; i < touches.length; i++) {
        if (isValidTouch(touches[i])) {
            evt.preventDefault();
            var idx = ongoingTouchIndexById(touches[i].identifier);
            if (idx >= 0) {
                ctx.beginPath();
                ctx.moveTo(arr_touches[idx].clientX - offset.x, arr_touches[idx].clientY - offset.y);
                ctx.lineTo(touches[i].clientX - offset.x, touches[i].clientY - offset.y);
                ctx.strokeStyle = color;
                ctx.stroke();

                arr_touches.splice(idx, 1, copyTouch(touches[i]));
            }
        }
    }
}
function handleEnd(evt) {
    var touches = evt.changedTouches;
    var offset = findPos(canvas);
    for (var i = 0; i < touches.length; i++) {
        if (isValidTouch(touches[i])) {
            evt.preventDefault();
            var idx = ongoingTouchIndexById(touches[i].identifier);
            if (idx >= 0) {
                ctx.lineWidth = 4;
                ctx.fillStyle = color;
                ctx.beginPath();
                ctx.moveTo(arr_touches[idx].clientX - offset.x, arr_touches[idx].clientY - offset.y);
                ctx.lineTo(touches[i].clientX - offset.x, touches[i].clientY - offset.y);
                arr_touches.splice(i, 1);
            }
        }
    }
}
function handleCancel(evt) {
    evt.preventDefault();
    var touches = evt.changedTouches;

    for (var i = 0; i < touches.length; i++) {
        arr_touches.splice(i, 1);
    }
}
function copyTouch(touch) {
    return { identifier: touch.identifier, clientX: touch.clientX, clientY: touch.clientY };
}
function ongoingTouchIndexById(idToFind) {
    for (var i = 0; i < arr_touches.length; i++) {
        var id = arr_touches[i].identifier;
        if (id == idToFind) {
            return i;
        }
    }
    return -1;
}
function changeColor(new_color) {
    color = new_color;
}
function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function isValidTouch(touch) {
    var curleft = 0, curtop = 0;
    var offset = 0;

    if (canvas.offsetParent) {
        do {
            curleft += canvas.offsetLeft;
            curtop += canvas.offsetTop;
        } while (touch == canvas.offsetParent);

        offset = { x: curleft - document.body.scrollLeft, y: curtop - document.body.scrollTop };
    }

    if (touch.clientX - offset.x > 0 &&
        touch.clientX - offset.x < parseFloat(canvas.width) &&
        touch.clientY - offset.y > 0 &&
        touch.clientY - offset.y < parseFloat(canvas.height)) {
        return true;
    }
    else {
        return false;
    }
}
function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj == obj.offsetParent);

        return { x: curleft - document.body.scrollLeft, y: curtop - document.body.scrollTop };
    }
}

to run code


source code


join telegram channel

Post a Comment

0 Comments

Close Menu