Mcanvas Vs Svg Vs Html5 Canvas

I have tested recently in the mobile browser which has Raphael canvas where we can draw lines etc using tablet. The speed and precision lacks when using svg to draw on browser for

Solution 1:

The issue mentioned regarding speed and performance is more intrinsic to the JavaScript library being used in SVG. In your fiddle, the performance issue in drawing is primarily because of the ever-expanding array of path and the fact that the entire path array is re-processed on every touch move. There is no simple way to fix this than working around it.

I have recreated your implementation with pure Raphael (and no jQuery.) http://jsfiddle.net/shamasis/kUQ7E/

The implementation has two aspects:

1. It bypasses Raphael's heavy attr function and directly sets the element's path using doodle.node.setAttribute('d', pathstring);
2. It uses a timeout to ignore touch up and down within a tolerable interval.

The fiddle (as of revision 24) looks like:

Raphael("canvas", function () {
    var win = Raphael._g.win,
        doc = win.document,
        hasTouch = "createTouch"in doc,

        M = "M",
        L = "L",
        d = "d",
        COMMA = ",",
        // constant for waiting doodle stopINTERRUPT_TIMEOUT_MS = hasTouch ? 100 : 1,
        // offset for better visual accuracyCURSOR_OFFSET = hasTouch ? 0 : -10,

        paper = this,
        path = "", // hold doodle path commands// this element draws the doodle
        doodle = paper.path(path).attr({
            "stroke": "rgb(255,0,0)"
        }),

        // this is to capture mouse movements
        tracker = paper.rect(0, 0, paper.width, paper.height).attr({
            "fill": "rgb(255,255,255)",
            "fill-opacity": "0.01"
        }),
        active = false, // flag to check active doodling
        repath = false, // flag to check if a new segment starts
        interrupt; // this is to connect jittery touch

    tracker.mousedown(function () {
        interrupt && (interrupt = clearTimeout(interrupt));
        active = true;
        repath = true;
    });

    tracker.mousemove(function (e, x, y) {
        // do nothing if doodling is inactiveif (!active) {
            return;
        }

        // Fix for Raphael's touch xy bugif (hasTouch && 
                (e.originalEvent.targetTouches.length === 1)) {
            x = e.clientX + 
                (doc.documentElement.scrollTop || doc.body.scrollTop || 0);
            y = e.clientY + 
                (doc.documentElement.scrollLeft || doc.body.scrollLeft || 0);
            e.preventDefault();
        }

        // Insert move command for a new segmentif (repath) {
            path += M + (x + CURSOR_OFFSET) + COMMA + 
                    (y + CURSOR_OFFSET);
            repath = false;
        }
        path += L + (x + CURSOR_OFFSET) + COMMA + 
                (y + CURSOR_OFFSET); // append line point// directly access SVG element and set path
        doodle.node.setAttribute(d, path);
    });

    // track window mouse up to ensure mouse up even outside// paper works.Raphael.mouseup(function () {
        interrupt && (interrupt = clearTimeout(interrupt));
        // wait sometime before deactivating doodle
        interrupt = setTimeout(function () {
            active = false;
        }, INTERRUPT_TIMEOUT_MS);
    });
});