Question

I’m attempting to make a program that takes the information gathered from some calculations and plots it on a canvas graph. I need to scale the graph, however, so that it can accommodate larger numbers. But every time I put ctx.scale(); the whole canvas blanks out! I thought I could stop this by scaling the canvas first, but nothing is drawn on the canvas after I scale it.

Here’s the coding for my canvas:

var c=document.getElementById("graph_");
        var ctx=c.getContext("2d");
        graph_.style.backgroundColor="white";
        var z0=Math.max(Math.abs(a),Math.abs(b));
        var z=Math.round(z0);           
        var z1=Math.round(z);
        var z2=z*2
        // alert(z1);   
        // alert(z2);

        ctx.scale(3200/z,3200/z)    

        var xnew=360/2+360/2*a
        var ynew=360/2-360/2*b
        alert(xnew);    
        alert(ynew);

        ctx.font = '10px Calibri';
        ctx.fillText("( 0 , 0 )", 125, 85);
        ctx.fillText(z1, 210, 87);
        ctx.fillText(z2, 270, 87);

        ctx.fillText(z1*-1, 75, 87);
        ctx.fillText(z2*-1, 0, 87);

        ctx.fillText(z1, 120, 43.5);
        ctx.fillText(z2, 120, 10);

        ctx.fillText(z1*-1, 120, 120);
        ctx.fillText(z2*-1, 120, 145);

        ctx.lineWidth = 1;
        ctx.beginPath()
        ctx.moveTo(150, 0);
        ctx.lineTo(150, 400);
        ctx.closePath();

        ctx.lineWidth = .2;
        ctx.moveTo(0, 75);
        ctx.lineTo(400, 75);
        ctx.strokeStyle = "#8B8682";
        ctx.stroke();
        ctx.closePath();

          ctx.beginPath();
          ctx.lineWidth = 2;
          ctx.moveTo(xnew, 180);
          ctx.lineTo(180, ynew);
          ctx.strokeStyle = "red";
          ctx.stroke();                         

Answer 1

Actually, the stuff is being drawn to the canvas, you just can’t see it because you’re both too far zoomed in and still in the upper left corner of the graph since the default origin points for drawing are in the top left as 0,0.

So if you want to zoom in that far (even though you probably want to zoom out to show bigger numbers, i.e. larger drawings on the graph) you need to translate the canvas origin point to your new origin point (the top left of what you want to see) before you scale the context.

You can use the translate method like

ctx.translate(newX,newY);

But before you do you’re going to what to save the context’s state so you can revert back to it.

Say you wanted to zoom in on the center of the graph you would translate to the point that is:

ctx.translate((-c.width /2 * scale) + offsetX,(-c.height / 2 * scale) + offsetY);

where the offsetX is the canvas width / 2 and offsetY is the canvas height / 2 and the scale is by the amount that you’re scaling in you ctx.scale call.