Clear Canvas Recursively after translating it

Question

I am trying to translate and save my canvas each time I press right key, so that it moves horizontally each time I press right key. This is the function I am using to move the canvas horizontally each time which is working for the first time and but not later.

function clearRight(){

var canvas1=document.getElementById('plot');
ctx=canvas1.getContext("2d");
ctx.restore();
ctx.translate(-1000,0);
ctx.save();
ctx.clearRect(0,0,canvas1.width,canvas1.height);
}

rightKey(){
    clearRight();
    draw();
}

Can anyone please point where am I going wrong in trying to move the canvas?

UPDATE I have solved the issue I was facing.

To move the canvas horizontally

var translated=0;

function clear()
{

    var canvas1=document.getElementById('plot');
    var ctx=canvas1.getContext("2d");
    ctx.restore();
    ctx.save();
    ctx.clearRect(0,0,canvas1.width,canvas1.height);

}

function rightKey()
{   
        clear();
    ctx.clearRect(0,0,canvas1.width,canvas1.height);
    translated += 10;
    ctx.translate(-translated,300);
    draw(ctx);
}

Answer 1

I'm assuming there's a reason why you're not just drawing an oversized canvas contained in a smaller div-wrapper with scrollbars enabled...so here's an alternative.

You could draw your entire plotted graph to a separate canvas.

Then to pan left/right you can draw that temporary canvas to your main canvas with an offset.

A Demo: http://jsfiddle.net/m1erickson/GfRLq/

Before panning right:

在此处输入图片说明

After panning right:

在此处输入图片说明

About dynamically changing plots:

If your plots are dynamic, then you can still use this panning technique.

Just update the tempCanvas with each new plot.

Example code:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var offset=0;

    // create some test data
    var points=[];
    for(var i=0;i<50;i++){
        points.push({x:i*40,y:100+Math.random()*100-50});
    }

    // create a temporary canvas
    var tempCanvas=document.createElement("canvas");
    var tempCtx=tempCanvas.getContext("2d");

    tempCanvas.width=40*points.length;
    tempCanvas.height=300;

    // draw your complete plot on the tempCanvas

    // draw the line
    tempCtx.beginPath();
    tempCtx.moveTo(points[0].x,points[0].y);
    for(var i=0;i<points.length;i++){
        var point=points[i];
        tempCtx.lineTo(point.x,point.y);
    }
    tempCtx.lineWidth=5;
    tempCtx.strokeStyle="blue";
    tempCtx.stroke();

    // draw the markers
    for(var i=0;i<points.length;i++){
        var point=points[i];
        tempCtx.beginPath();
        tempCtx.arc(point.x,point.y,10,0,Math.PI*2);
        tempCtx.closePath();
        tempCtx.fillStyle="black";
        tempCtx.fill();
        tempCtx.fillStyle="white";
        tempCtx.fillText(i,point.x-3,point.y+3);
    }

    ctx.drawImage(tempCanvas,0,0)


    // function to draw the canvas with your specified offset
    function drawPlotWithOffset(offset){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(tempCanvas,offset,0,canvas.width,canvas.height,0,0,canvas.width,canvas.height)
    }

    $("#left").click(function(){
        offset-=20;
        if(offset<0){offset=0;}
        drawPlotWithOffset(offset);
    });
    $("#right").click(function(){
        offset+=20;
        if(offset>tempCanvas.width-canvas.width){
            offset=tempCanvas.width-canvas.width;
        }
        drawPlotWithOffset(offset);
    });

}); // end $(function(){});
</script>
</head>
<body>
    <button id="left">Pan Left</button><br>
    <button id="right">Pan Right</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Clear Canvas Recursively after translating it

Question

1 answers

solution1
1 ACCPTED 2014-03-07 19:44:44

Clear Canvas Recursively after translating it

Question

1 answers

solution1 1 ACCPTED 2014-03-07 19:44:44

solution1
1 ACCPTED 2014-03-07 19:44:44