Jump to content

problems with drawing in canvas and js


Recommended Posts

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 by DDs1
Link to comment
Share on other sites

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 by birbal
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...