problems with drawing in canvas and js

[divinedesigns1]

can anyone tell me how i would be able to know how many places i need to move a square to the other side of a river which is 200 px width? or how would i know how many places i need to move to be able to draw a square? this is what im drawing, im suppose to create the right side but im not sure how to figure out the points positions

 <script type="application/javascript" language="javascript">window.onload = draw;function draw(){// assign the canvas element to a variablevar canvas = document.getElementById("canvas1");// create the html5 content object to be enable to draw methodsvar ctx = canvas.getContext("2d");// create the first shapectx.beginPath();ctx.moveTo(100, 50);ctx.lineTo(130, 100);ctx.lineTo(70, 100);ctx.fill();// create the second shapectx.beginPath();ctx.moveTo(72, 60);ctx.lineTo(85, 72);ctx.lineTo(71, 94);ctx.lineTo(50, 70);ctx.lineTo(65, 40);ctx.fill();// create the last shapectx.beginPath();ctx.moveTo(113, 69);ctx.lineTo(158, 60);ctx.lineTo(126, 90);ctx.fill(); }</script>

i got 3 out of the 5 positions correct which is by guessing, so can anyone point me in the right direction so ill be able to figure out where the points need to go or can someone help me understand how to figure out where to place the points

Edited October 7, 2012 by DDs1

[birbal]

canvas is bitmap so once you draw a image it becomes pixels. there is no way to detect object through a array of pixels. you have to keep track of objects in js data structure to determine position of the object and have to calculate against the position of river and position of boxes to determine how many pixel you neeed to ove to crosse the river..

Edited October 7, 2012 by birbal

[divinedesigns1]

still not getting it to work