469,307 Members | 2,064 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,307 developers. It's quick & easy.

Canvas is mad, Ratio increased Madness

I have created this cool app with js and html5 canvas,
my problem is the ratio of the mouse relative to the canvas.
It changes the ratio with no reason I can explain.
Take a look:
DEMO: agam.dreamhosters.com
Expand|Select|Wrap|Line Numbers
  1. <html> 
  2. <head> 
  3.     <title>My AWESOME website...</title> 
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
  5. <script src="/jq.js"></script> 
  6. <style type="text/css"> 
  7.   canvas { 
  8.     width:50%;
  9.     height:50%;
  10.     position:absolute;
  11.     left:50%;
  12.     top:50%;
  13.     margin:-25% 0 0 -25%;
  14.     border:1 solid black;
  15. }
  16. </style> 
  17. </head> 
  18. <body> 
  19. <h1>Yes this site Is awesome!
  20. I am working on the site so it will be changed later on.</h1> 
  21. <I>I have this little game for now...(I made it, html5)</i> 
  22. <h2 id="status"> 
  23. 0, 0
  24. </h2> 
  25. <h2 id="status2"> 
  26. 0, 0
  27. </h2> 
  28. <h3 id="numb">0</h3> 
  29. <canvas id="myCanvas" width="1000" height="1000"></canvas> 
  30. <script type="text/javascript"> 
  32. jQuery(document).ready(function(){
  33. var dWidth = $(document).width() ;
  34. var dHeight= $(document).height() ;
  36.  canvas = document.getElementById('myCanvas');
  37.  context = canvas.getContext('2d');
  38.  var numB = 0;
  41.    $(document).mousedown(function(e){
  42.    alert(dWidth+"|"+dHeight);
  43.    $(document).mousemove(function(e){
  46.    $('#status').html(e.pageX +', '+ e.pageY);
  47.    $('#status2').html((e.pageX) +', '+ (e.pageY));
  48.     var col = new Array(); 
  49.     col[0]="#FF0000";       
  50.     col[1]="#FFFF00";
  51.     col[2]="#00FF00";
  52.     col[3]="#00FFFF";       
  53.     col[4]="#0000FF";
  54.     col[5]="#FF00FF";
  58.     context.beginPath();
  59.     context.fillStyle=col[Math.round(Math.random()*6)];
  60.     context.arc(e.pageX-343,e.pageY-170, Math.round(Math.random()*25),0,Math.PI*2,true);
  61.     context.fill();
  62.     numB++;
  63.     $("#numb").html("Number of cicles:"+numB);
  65.    });
  66.    });
  67. })
  68. </script> 
  69. </body> 
  70. </html>

I have created the canvas in the center as you can see,
My problem is to make the drawing on my mouse...

Anyone can help?
Feb 10 '11 #1
9 1872
I suggest you get the mouse position and calculations right. It probably does not have anything to do with canvas having an odd ratio. Are you really thinking that professionally developed software based on an industry standard is going to have this kind of problem built into it? Check your logic first.

I just spent a couple days getting the logic right in the code I was writing. I could not get it right on the computer before it was right in my head.

Try working in a 100 x 100 space and go from there.

Keep it simple. After you have it right at basic level, increase the complexity. Writing down the steps in the process may help you as well.
Feb 13 '11 #2
Sorry, but could you at least point to me whats wrong?
I didn't find any logic problem..
I got it centered and got rid of 1/4 of the screen so the canvas coordinates will be right.

My mouse coordinate code it taken from here:
Feb 14 '11 #3
yes, you did not find a logic problem. if you have, you would try to address it yourself. I suggested other ways to structure your application so you can find the error in the code. the problem is actually that you are not seeing the error yourself. I get your point that you are asking for help, but you will probably benefit more in the long term from having a better ability to examine what you wrote than if I some random person on the internet gives you an answer to the error in your code.

have you actually restructured your example into a more basic form? what did you learn from that?
Feb 15 '11 #4
I can see the problem, and I even tried to draw it on a piece of paper but it just doesn't work in "real life"...
What do you suggest I'd do? Can you just point to me a tip or something that I could understand where to step to?
Is it related to html,css or js?
And yes I have tried to make it on a basic form(accentually when I comment the absolute the canvas works with out ratio problems increasing but does not paint on the real mouse position.)

Thanks in advance
Feb 17 '11 #5
16,027 Expert Mod 8TB
Don't forget to take into account the offsetLeft/Top of the canvas itself.

In the discussion so far about making it simpler to solve the problem, you could have put the canvas at position 0,0.
Feb 23 '11 #6
The main point of this is to make it be centered.
Plus, I think that my main problem is with css because that's the area which I know the least.
Feb 23 '11 #7
16,027 Expert Mod 8TB
OK, so did you exclude the offsetLeft and offsetTop of the canvas element from your calculations?
Feb 25 '11 #8
var elem = document.getElementById("myCanvas");
var leftOffset = elem.offsetLeft;
var topOffset = elem.offsetTop;
context.arc(e.pageX-leftOffset,e.pageY-topOffset, Math.round(Math.random()*25),0,Math.PI*2,true);
Feb 25 '11 #9
Try making changes that are inline with this explanation from here...

"...The <canvas> element has only two attributes - width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size. (If your renderings seem distorted, try specifying your width and height attributes explicitly in the <canvas> attributes, and not with CSS.)..."

instead of positioning the canvas element with CSS margins, try applying margins to a div containing the canvas element.
Mar 3 '11 #10

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by Mickel Grönroos | last post: by
1 post views Thread by Mickel Grönroos | last post: by
24 posts views Thread by TC | last post: by
5 posts views Thread by Andrew Poulos | last post: by
11 posts views Thread by Aaron Gray | last post: by
3 posts views Thread by moondaddy | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.