Merhaba ben şuanda bir çizim uygulaması üzerine çalışıyorum aslında uygulamanın pc versiyonunu tamamladım. Ama mobilde çizim bölümü çalışmıyor.
Bu sorunu nasıl çöze bilirim?

İşte örnek kodlar

  <style>
    canvas {
        background-image: url('system-img/humen-body.png');
        border: 2px solid;
        margin-top: 5px;
    }
    .color{
        width: 280px;
    }
    .color div{
        width: 15px;
        padding: 10px;
        height: 15px;
        float: left;
    }
    .draw-body{
        width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    .draw-button input {
        width: 100px;
        margin-left: 62px;
        height: 36px;
        cursor: pointer;
        margin-top: -22px;
    }
    .save-button {
        width: 150px;
        margin-left: auto;
        margin-right: auto;
    }
    .save-button input {
        width: 150px;
        height: 50px;
        font-size: 20px;
        margin-top: 10px;
    }
    .form-body {
        width: 380px;
        margin-left: auto;
        margin-right: auto;
        font-size: 20px;
        padding: 10px;
    }
    .form-body textarea{
        width: 100%;
        height: 200px;
        margin-top: 10px;
    }
    .form-body select {
        margin-top: 10px;
        height: 20px;
        width: 100%;
    }
</style>
<script type="text/javascript">
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;

    var x = "black",
        y = 2;

    function init() {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;

        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);
    }

    function color(obj) {
        switch (obj.id) {
            case "green":
                x = "green";
                break;
            case "blue":
                x = "blue";
                break;
            case "red":
                x = "red";
                break;
            case "yellow":
                x = "yellow";
                break;
            case "orange":
                x = "orange";
                break;
            case "black":
                x = "black";
                break;
            case "white":
                x = "white";
                break;
        }
        if (x == "white") y = 14;
        else y = 2;

    }

    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
        var dataURL = canvas.toDataURL();
        var imgdate = document.getElementById("img-data");
        imgdate.value = dataURL;

    }

    function erase() {
        var m = confirm("Çizimi silmek istediğine emin misin?");
        if (m) {
            ctx.clearRect(0, 0, w, h);
        }
    }

    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;

            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }
</script>
<link rel="stylesheet" href="css/cssGeneral.css">
<body onload="init()">
<div class="body1">
    <div class="post1">
        <div id="randevu"></div>
        <div id="post">
            <div class="draw-body">
                <div class="color">
                    <div style="background:green;" id="green" onclick="color(this)"></div>
                    <div style="background:blue;" id="blue" onclick="color(this)"></div>
                    <div style="background:red;" id="red" onclick="color(this)"></div>
                    <div style="background:yellow;" id="yellow" onclick="color(this)"></div>
                    <div style="background:orange;" id="orange" onclick="color(this)"></div>
                    <div style="background:black;" id="black" onclick="color(this)"></div>
                    <div style="margin-left: 10px; background: white; border: 2px solid; height:12px; width: 12px;" id="white" onclick="color(this)">
                        <div class="draw-button">
                            <input type="button" value="Temizle" id="clr" size="23" onclick="erase()">
                        </div>
                    </div>
                </div>
                <canvas id="can" width="400" height="400"></canvas>
                
            </div>
        </div>
    </div>
    <div class="control">
        <br><br><br>
    </div>
</div>
</body>