canvas coordinates

[Nibbus]

Hi there,

I´m using <canvas> dhtml tag for drawing some lines . The problem is that I generate them in a loop and then I want to draw, but nothing is happening... the coordinates of the canvas are (0,0) always?? or when a canvas is generated it gets global coordinates and so I have to try catch them another way?

Thanks for your time

[acoder]

Can you post your code?

See if this link helps.

[Nibbus]

Can you post your code?

See if this link helps.

Hi acoder,

Everything I did so far I learnt on that page! :D
I have worked out that the coordinates do not start in (0,0) but they gain the global coordinates of the document. The problem now is that I´m getting the coordinates, drawing, but can´t move the cursor where I want. For ex, I want to draw from a start position to a finish position, positionate myslf in another start point and draw a line to another finish point, and so on... I use the moveTo function as they say in that tutorial, but ain´t workin´... this question is not the original thing I wanted to know, but I managed to solve it and I have this one now...
Here is the code :

function drawLinks()
       {    
("dropZone").getElementsByTagName("div");
            
            for (var i = 0; i < oProcess.length ; i++)
            {                
                var el = oProcess[i].procCode;
                var currentX = getProcessPositionX(el);
             //   alert("CProc X " + i+1 + ": " + currentX);
                var currentY = getProcessPositionY(el);
             //   alert("CProc Y " + i+1 + ": " + currentY);
                
                for (j = 0; j < oProcess[i].procFinish.length ; j++)
                {
                    var nextEl = oProcess[i].procFinish[j];
                    var nextX = getProcessPositionX(nextEl);
                 //   alert("NProc X " + (i+1) + ": " + nextX);
                    var nextY = getProcessPositionY(nextEl);
                  //  alert("NProc Y " + (i+1) + ": " + nextY);
                                 
                    
                    var newCanvas = document.createElement('canvas');
                     newCanvas.setAttribute('class', "canvasClass");
                                 
                    var dz = document.getElementById("dropZone");
                    dz.appendChild(newCanvas);   
                    
                    var el = Dom.get(newCanvas);
                    dd = new YAHOO.util.DD(el);
                    alert("Canvas coordinates: " + getProcessPositionXY(el));
                    
                    // Make sure we don't execute when canvas isn't supported
                    if (newCanvas.getContext){
                    // use getContext to use the canvas for drawing
                           var ctx = newCanvas.getContext('2d');
                                
                    
               //     ctx.beginPath();
                    ctx.strokeStyle = 'black';
                    ctx.moveTo(currentX,currentY);
                    ctx.lineTo(nextX,nextY);
                                   
                    ctx.stroke(); 
                    
              //      ctx.closePath();
                    }
                    else {
                        alert("Your browser does NOT support this page!");
                    }
                }
             }
            
         
             alert("I´m done!");
         }

[Nibbus]

just ignore line 3, I forgot to erase it when I pasted the code here

[acoder]

Can you get the simple examples to work?

[Nibbus]

Can you get the simple examples to work?

Not quite... or better, I can make them work, but they don´t quite do what´s anounced... for example, I created a canvas with 100px width and 100px hight. As they use in the tutorial, I moved the cursor to (0,0) , using moveTo(0,0) and then drew a lineTo(100,100) . Because lineTo receives just the target coordinates of the line, this should draw a perfect diagonal across my canvas, but it doesn´t!!! if you just try these several lines lines I´m posting , you can see for yourself...

I don´t know what the problem can be, but it´s just what I´m needing for completing my task of connecting entities like in an entity-relashionship model...

<canvas id="test" style="width: 100px; height: 100px; border: solid 2px black; ">        
</canvas>

<script type="text/javascript">
function xxx()
 {
    // get the canvas element using the DOM
    var canvas = document.getElementById('test');

   // Make sure we don't execute when canvas isn't supported
    if (canvas.getContext){

    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');
   
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(100,100);
    ctx.closePath();
    ctx.stroke();
    }
}
</script>

I tried with and without the begin-closePath function, but the result is the same...

Thanks for your help

[acoder]

If you use it as:
[HTML]<canvas id="test" width="100" height="100" style="border: solid 2px black; "></canvas>
[/HTML]it seems to work as expected.

[Nibbus]

yes indeed!!!!! thank you very much, problem solved ;D
you rock!!

[acoder]

You're welcome.

Glad you got it working.