473,322 Members | 1,614 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Canvas is mad, Ratio increased Madness

21
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"> 
  31.  
  32. jQuery(document).ready(function(){
  33. var dWidth = $(document).width() ;
  34. var dHeight= $(document).height() ;
  35.  
  36.  canvas = document.getElementById('myCanvas');
  37.  context = canvas.getContext('2d');
  38.  var numB = 0;
  39.  
  40.  
  41.    $(document).mousedown(function(e){
  42.    alert(dWidth+"|"+dHeight);
  43.    $(document).mousemove(function(e){
  44.  
  45.  
  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";
  55.  
  56.  
  57.  
  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);
  64.  
  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 1944
Ketrid
4
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
agam
21
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.

B.W:
My mouse coordinate code it taken from here:
http://docs.jquery.com/Tutorials:Mouse_Position
Feb 14 '11 #3
Ketrid
4
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
agam
21
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
acoder
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
agam
21
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
acoder
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
agam
21
yep:
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
Ketrid
4
Try making changes that are inline with this explanation from here...
https://developer.mozilla.org/en/Can...al/Basic_usage

"...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

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

Similar topics

0
by: Mickel Grönroos | last post by:
Hi, I'm trying to put an Tkinter.Entry of fixed size onto a specific location on a canvas using the place manager. The idea is that one can double-click a rectangle object on a canvas to get an...
1
by: Mickel Grönroos | last post by:
Hi, I have a Tkinter.Canvas of variable width. Is there a standard way of asking the canvas which parts of it that is visible? I.e. on the horizontal scale, I would like to know at what fraction...
24
by: TC | last post by:
Hi folks I want to enhance my website to distinguish "external" hyperlinks from "internal" ones. With that aim, I've written the following two small files for testing purposes: ...
5
by: Andrew Poulos | last post by:
Is there a right/best way to draw an ellipse using Canvas? (With VML there's the v:oval element which makes the exercise trivial). I tried drawing a 360 degree arc (a circle) and then scaling it...
11
by: Aaron Gray | last post by:
Hi, I have put together a bit of JavaScript to make a square resizable canvas :- http://www.aarongray.org/Test/JavaScript/resizable.html Problems I have :- a) I cannot seem to center it...
3
by: moondaddy | last post by:
I'm working in a WPF windows application and am wondering if it's possible to rotate a Canvas or user control derived from Canvas. I created a user control which derives from Canvas and I need to...
2
TMS
by: TMS | last post by:
Schools over!!! Now its time to play. I would like to learn how to make objects move from one location to the next on a canvas widget. For example: from Tkinter import * class square:...
6
by: Nebulism | last post by:
I have been attempting to utilize a draw command script that loads a canvas, and through certain mouse events, draws rectangles. The original code is from...
4
by: moondaddy | last post by:
I have a wpf project where I use a canvas to drag shapes around. when I drag a shape beyond the right or bottom side I get scrollbars which is good. I also get scrollbars when I zoom in and a...
7
by: Haiyan | last post by:
Dear experts: I am trying to add one xy-scrollbar on the canvas, then put lots of check buttons on the canvas. I got at least following 2 problems: 1.I can see the y-scroll bar but contents on...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.