Moving a canvas from left to right is not smooth and fast

Question

I want to move one canvas on top of another. when top canvas moves the base canvas displays its x and y. The event initially starts at mouse down. so press mouse and start moving the canvas moves smoothly from right to left but not left to right.

http://jsfiddle.net/happyomi/23PL3/3/

<head>
    <style type="text/css">
        body, html {
            margin: 0;
        }
        canvas {
            position: absolute; 
            /* top: 0;
            left: 0;*/
        }
        #temp {
            background-color: pink;
        }
    </style>
</head>
<body style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;">
    <canvas id="myCanvas" style="display: block;">
            Your browser does not support the HTML5 canvas tag.
    </canvas>
    <canvas id="temp" style="position: relative">
            Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var hgap = 0;
        var vgap = 0;
        var rows, cols;
        var annotation_x = 1;
        var row = 0; var col = 0;

        //ctx.font = "14px Arial";
        c.width = $(document).width();
        c.height = $(document).height();

        var t = document.getElementById("temp");
        tctx = t.getContext("2d");
        // tctx.lineWidth = 10;
        tctx.lineJoin = 'round';
        tctx.lineCap = 'round';
        tctx.strokStyle = 'red';

        var mouse = { x: 0, y: 0 };
        c.addEventListener('mousemove', function (evt) {
            mouse.x = evt.pageX;
            mouse.y = evt.pageY;

        }, false);
        c.addEventListener('mousedown', function (evt) {
            //    tctx.clearRect(0, 0, c.width, c.height);
            evt.preventDefault();
            ctx.clearRect(0, 0, c.width, c.height);
            tctx.clearRect(0, 0, c.width, c.height);
            mouse.x = evt.pageX;
            mouse.y = evt.pageY;
            t.style.left = mouse.x + "px";
            t.style.top = mouse.y + "px";
            t.style.position = "absolute";
            str = "x=" + mouse.x + "  y=" + mouse.y;
            ctx.fillText(str, 10, 10);
            c.addEventListener('mousemove', onPaint, false);
        }, false);

        var onPaint = function () {
            ctx.clearRect(0, 0, c.width, c.height);
            tctx.clearRect(0, 0, t.width, t.height);
            t.style.left = mouse.x + "px";
            t.style.top = mouse.y + "px";
            t.style.position = "absolute";
            str = "x=" + mouse.x + "  y=" + mouse.y;
            ctx.fillText(str, 10, 10);
        }
        c.addEventListener('mouseup', function () {
            c.removeEventListener('mousemove', onPaint, false);
        }, false); 
    </script>
</body>

Answer 1

Heres A good Starting point for ya :) it does what your looking for. jsFiddle

/* Main Canvas */
var main = document.getElementById('main');
main.width = window.innerWidth;
main.height = window.innerHeight;
var mainCtx = main.getContext('2d');
var mainFill = '#000';
mainCtx.fillStyle = mainFill;
mainCtx.rect(0,0,main.width,main.height);
mainCtx.fill();

 /* secondary canvas */
var cv = document.createElement('canvas');
cv.style.position = 'absolute';
cv.width = '200';
cv.height = '100';
cv.style.left = '0px';
cv.style.top = '0px';
var ctx = cv.getContext('2d');
var fillRect = '#ccc';
var fillText = '#000';
ctx.fillStyle = fillRect;
ctx.rect(0,0,cv.width,cv.height);
ctx.fill();

//draw this canvas to main canvas
mainCtx.drawImage(cv,parseInt(cv.style.left),parseInt(cv.style.top));

var isHolding = false;
var mDown = function(e)
{
    isHolding = true;
    main.addEventListener('mousemove',mMove);
}

var mMove = function(e)
{
    console.log('moving');
    if(isHolding)
    {
         var xPos = e.pageX;
         var yPos = e.pageY;
         cv.style.left = (xPos-(cv.width/2))+'px';
         cv.style.top = (yPos-(cv.height/2))+'px';
         cv.width = cv.width; //clears canvas
         ctx.fillStyle = fillRect;
         ctx.rect(0,0,cv.width,cv.height);
         ctx.fill();
         ctx.fillStyle = fillText;
         ctx.fillText('x: '+e.pageX,10,10);
         ctx.fillText('y: '+e.pageY,50,10);

        //draw temp canvas to main canvas
        this.width = this.width;
        mainCtx.fillStyle = mainFill;
        mainCtx.rect(0,0,main.width,main.height);
        mainCtx.fill();
        mainCtx.drawImage(cv,parseInt(cv.style.left),parseInt(cv.style.top));
    }
}

var mUp = function(e)
{
    isHolding = false;
    main.removeEventListener('mousemove',mMove);
}

main.addEventListener('mousedown',mDown);
main.addEventListener('mouseup',mUp);

also it gets rid of the move event when not being used which will help have less event dispatches in memory and help with performance.

Moving a canvas from left to right is not smooth and fast

Question

1 answers

solution1
1 2014-06-02 09:54:20

Moving a canvas from left to right is not smooth and fast

Question

1 answers

solution1 1 2014-06-02 09:54:20

solution1
1 2014-06-02 09:54:20