Why my small app does not draw on smartphones?

Question

I have this code, that is meant to allow drawing on android smartphones tablets. I use touch events. With desktop events, it works, on desktop browsers, it work. In the code, I commented out the code for desktop and I left only the code for android smartphones and tablets. Any ideas please?

Here is the HTML:

<div id="canvas">Click to draw<br/></div>

Here is the JavaScript:


(function() {
    // Creates a new canvas element and appends it as a child
    // to the parent element, and returns the reference to
    // the newly created canvas element


    function createCanvas(parent, width, height) {
        var canvas = {};
        canvas.node = document.createElement('canvas');
        canvas.context = canvas.node.getContext('2d');
        canvas.node.width = width || 100;
        canvas.node.height = height || 100;
        parent.appendChild(canvas.node);
        return canvas;
    }

    function init(container, width, height, fillColor) {
        var canvas = createCanvas(container, width, height);
        var ctx = canvas.context;
        // define a custom fillCircle method
        ctx.fillCircle = function(x, y, radius, fillColor) {
            this.fillStyle = fillColor;
            this.beginPath();
            this.moveTo(x, y);
            this.arc(x, y, radius, 0, Math.PI * 2, false);
            this.fill();
        };
        ctx.clearTo = function(fillColor) {
            ctx.fillStyle = fillColor;
            ctx.fillRect(0, 0, width, height);
        };
        ctx.clearTo(fillColor || "#ddd");

        // bind mouse events
        /*canvas.node.onmousemove = function(e) {
            if (!canvas.isDrawing) {
               return;
            }
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            var radius = 5; // or whatever
            var fillColor = '#ff0000';
            ctx.fillCircle(x, y, radius, fillColor);
        };
        canvas.node.onmousedown = function(e) {
            canvas.isDrawing = true;
        };
        canvas.node.onmouseup = function(e) {
            canvas.isDrawing = false;
        };
        */
        // bind touch events
        canvas.node.ontouchmove = function(e) {
            if (!canvas.isDrawing) {
               return;
            }
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            var radius = 5; // or whatever
            var fillColor = '#ff0000';
            ctx.fillCircle(x, y, radius, fillColor);
        };
        canvas.node.ontouchstart = function(e) {
            canvas.isDrawing = true;
        };
        canvas.node.ontouchend = function(e) {
            canvas.isDrawing = false;
        };
    }

    var container = document.getElementById('canvas');
    init(container, 200, 200, '#ddd');

})();

Link to the code: https://codepen.io/sp2012/pen/gOmGZGV

score 1 · Accepted Answer · answered May 29 '21 at 13:17

1

It should be because of your x and y extraction

   var x = e.pageX - this.offsetLeft;
   var y = e.pageY - this.offsetTop;

Check this documentation for canvas touch events

I think you should access e.touches array to extract pageX and pageY info.

Here is a link where I made some changes to make it work for mobile. But it's just a hack :) . Also go through this link which has similar question.

answered May 29 '21 at 13:17

Akhil

879
5
11

Thanks a lot. It worked. How can I make the drawing to look like a continuous line, instead of little circles? – sp2012 May 29 '21 at 13:52
Make it a line instead of a circle. And Start with mouse down & keep joining from point to point that you get from mouse move then end it at mouse up and repeat – Akhil May 29 '21 at 14:06
Akhil can you make a quick demo of that? My JavaScript skills are not very strong. – sp2012 May 29 '21 at 14:17
You can check [this](https://stackoverflow.com/questions/2368784/draw-on-html5-canvas-using-a-mouse). Don't forget to add touch event listeners for mobile and handle it the same way as above – Akhil May 29 '21 at 14:31

Why my small app does not draw on smartphones?

1 Answers1