Tracker
HOME    TRACKER    JavaScript

# Calculate X, Y Coordinates Of Rotated Line Segments To Draw On A Canvas?

## I want to draw a line 10 pixels thick, but I don't want to use the standard lineTo and set a stroke width. I want to actually draw the border of the line using beginPath and lineTo. The reason being is this is actually for AS3 project and using this method allows us to have a line stroke and fill. So rotating the canvas and things of that nature are out of the question. I just need to figure out how to calculate the proper x, y coordinates for the line. In the code below is the coordinates for the top of a line. I basically want to take this coordinates, add 10 to the y axis for each one and that will give me the return coordinates for the bottom of the line. Of course, each segment of the line is rotated, so calculating the coordinates for the bottom of the line has proved tricky. Once you run the example code, the issue should be obvious. The line isn't drawn properly. For relatively mild rotations of line segments it seems to work, but as the angle of rotation gets more severe the x, y coordinates are calculated incorrectly. <!doctype html> <html> <body> [code]....

Related Forum Messages For JavaScript category:
Coordinates - Draw A Line Between To Different Coordinates Which Are Going On Google Maps
i have to draw a line between to different coordinates which are going on google maps so for example :

[Code]...

the above coordinates are in xml format which, i later call in Java script functions and display them on the map as a simple pointers what i need is from one point of coordinates to another point of coordinates Java script would draw a line which would represent the direction from one coordinate to other .

Posted: Apr 2nd, 2010

Jquery :: Canvas - Search For Multiple Keywords And Then Draw A Line To Connect Them With Canvas
I'm trying to set up a script that will search for multiple keywords and then draw a line to connect them with canvas. But I've run into an issue where it starts to draw the second line but it uses some of the x y outputs of the previous line. Here's what I have: [URL]

Posted: Jul 27 11 at 15:48

Can't Draw Circle From Mouse Coordinates On Click In HTML5 Canvas
I'm trying to draw a red circle where my mouse clicks but nothing is drawn. I can follow my x,y coordinates being the ones I click. If I put constant values for x,y in the arc method a circle is displayed. What am I doing wrong?

var currColor = "#FF0000";
var currSize = 20;
var theCanvas = document.getElementById('my_canvas');

[Code]....

Posted: Jul 25 11 at 7:51

Draw A Resized Picture Instead Of Line (html5 Canvas)?
So we can have for example such function to draw a line

function drawLine(g, n, x1, y1, x2, y2){
g.beginPath();
g.lineWidth = n > 0 ? n : 1;
g.strokeStyle = "rgb(0, 128, 32)";

[code]....

but what if we want to draw an image instead of line (resized in respect for line size, with alpha channel).

Posted: Dec 23 10 at 19:11

Draw A Simple Line On Canvas (in 3d) And Make It Rotatable?
So I want to draw a line on canvas (in 3d) and make it rotatable (in 3d) on mouse dragging that line (dragging some of its points) (better with out use of anything like a specialized lib - pure no libs JS...)?

Posted: Dec 30 10 at 2:07

Determine Coordinates Of Rotated Rectangle?
I'm creating an utility application that should detect and report the coordinates of the corners of a transparent rectangle (alpha=0) within an image.So far, I've set up a system with Javascript + Canvas that displays the image and starts a floodfill-like operation when I click inside the transparent rectangle in the image. It correctly determines the bounding box of the floodfill operation and as such can provide me the correct coordinates.However, the bounding box approach breaks down then the transparent rectangle is rotated (CW or CCW) as the resulting bounding box no longer properly represents the proper width and height.

Posted: Apr 10 10 at 11:11

Find The X,y Coordinates Of A Rotated Vector?
I found the best way of calculating the width and height of the bounding box of a vector post-rotation from a different stack overflow post. This worked great. My problem now is calculating the new x,y coordinates of the rotated vector's bounding box. Here is the my javascript. The newWidth, newHeight variables are correct -- the rotatedXPos, rotatedYPos are not correct, however, and it's because x0, y0 -- which I think should be the rotating middle of the vector -- are also incorrect (They're set to just the x,y coordinates of the upper-right/left of the vector, which I know is wrong).

this.options.rotationAngle = parseInt(this.options.lastRotationAngle);
var points = new Array();

[code]....

Posted: Dec 19 09 at 18:07

Get New X,y Coordinates Of A Point In A Rotated Image?
I have Google Maps icons which I need to rotate by certain angles before drawing on the map using MarkerImage. I do the rotation on-the-fly in Python using PIL, and the resulting image is of the same size as the original - 32x32. For example, with the following default Google Maps marker:, a 30 degrees conter-clockwise rotation is achieved using the following python code:

# full_src is a variable holding the full path to image
# rotated is a variable holding the full path to where the rotated image is saved
image = Image.open(full_src)

[code]....

Posted: Jun 21 11 at 15:47

Draw With HTML5 Canvas - Use The API Methods To Draw ?
I'm trying to learn how to draw to canvas, I read alot of resources it all teachs you about the API and how to use it to draw etc and I found nice resources out there, the problem is now i know how to use the API methods to draw but still I can't figure out how to draw!Don't get me wrong, I'm not looking forward to learn art concepts etc, I'm talking about simple shapes like a heart or a diamond by example, how do I figure out the coordinates, the x and y of everything I know how to draw an arc but how do I figure out the control points coordinate by example?

In vector drawing softwares you get visual feedbacks while your drawing and I know its harder and more complicated with canvas, but I don't know what or how I should improve this ability. I don't even know what abilities I have to improve..

Posted: Oct 1 11 at 14:11

Determine If An Image Is Outside The Visible Canvas After It Has Been Rotated?
I am writing a canvas-based game which involves many sprites on the canvas at one time. In some cases the sprites are not visible and to save render cycles I do not render them to the canvas if the player will not see them. This works great for sprites that are not rotated but as soon as they become rotated (especially rectangles) I can no longer accurately determine if they are still within the visible canvas. Here is what I am doing so far as part of my main render loop:

if (image !== null) {
ctx.save();
ctx.translate(this.x, this.y);

[code]....

Posted: Jan 7 at 19:31

Geometry - Get Un-translated, Un-rotated (x,y) Coordinate Of A Point From A Canvas?
In Javascript we often render graphics by rotating and translating the coordinate plane before sending things

ctx.save();
ctx.translate(someX, someY);
ctx.rotate(someAngle * Math.PI / 180);

[code]....

So having done this, how do I figure out the actual values of the endpoints of that line segment I've drawn? Because after that translating and rotating, (x1,y1) and (x2,y2) are somewhere far away from where they'd be without the translating and rotating. Is there an easy way to find out what their actual values are?

Posted: May 11 09 at 19:57

HTML5 Canvas - Draw The Same Thing In All Canvas Elements By Class?
I have the following HTML...

<p><a href=""><canvas class="demo2" width="6" height="12">Fallback</canvas> Back to (1)...</a></p>
<p><a href=""><canvas class="demo2" width="6" height="12">Fallback</canvas> Back to (2)...</a></p>
</body>

...and javascript:

function draw() {
var canvas2 = \$('.demo2').get(0); // This draws in the first canvas
//var canvas2 = \$('.demo2').get(); This doesn't draw at all

[code]....

What I'd like to happen is for the all canvases with the class demo2 to be drawn in.I thought \$('.demo2').get() would get all elements by that classname. \$('.demo2').get(0) draws in the first one but I'd like to draw in them all.[URL]

Posted: Dec 16 11 at 10:12

JQuery :: Draw A Line Between 2 Elements And Refreshing That Line?
I am using JQuery-UI draggables and droppables to clone elements onto a div. What is the best way to draw a line between elements on a page using JQuery.

What is the best way to refresh lines on the page? I will have multiple lines on the page and only want to update a particular line rather than refresh every line.

Posted: Jan 17 11 at 10:37

Draw Square With Polar Coordinates?
I have a square, where the closest points are 1 unit away from the center. See my ascii diagram below:

+-----------+
| |
| x |
|-----+ |
| |
| |
+-----------+

Therefore, the distance from the origin to the corners is the sqrt(2). I need a function that returns the distance from the origin to a point on the square at any angle. For example, for an input of 0, the function would return 1. For an input of 45, the function would return the distance to a corner, the square root of 2. Then for 90, it would return 1 again.In other words, when you graph the function with polar graphing, it will draw a square.I believe that the function would be something like this:

f(x) = sqrt(tan(x)^2+1)

The only problem is that the function above will not graph the sides of the square. I need something that draws all 4 sides.I know that there is a trigonometric function for something similar to this, but I will be using this function in javascript, so I will only be able to use the standard trigonometry functions.

Posted: Jan 25 11 at 0:44

Sort An Array Of GPS Coordinates To Draw A Non-overlapping Bounding Box?
I have a collection of GPS coordinates (Lat/log) in an array that I want to use to create a polygon in google maps. If i use the unsorted array, the polygon lines are drawn in the order of the array index. sort the array such that when i draw the polygon, the borders do not overlap.

Posted: Sep 11 10 at 5:02

Get Pixel Coordinates Of Text And Draw A Rectangular Border Around It Using Script?
I am evaluating technology options for an upcoming project, and one of the requirements is to draw a rectangle around certain groups of words in a text field.

Each time the text is evaluated and parsed, certain recognized parts of it must be boxed with a rectangle, which should also respond to mouse clicks. There is even a requirement to place a little triangle to one of the corners of this rectangle.

I have no control over the requirements, and clearly this requirement points out to getting pixel positions of text in a text field (or a div container), and using some sort of overlay mechanism to draw the rectangle.

Posted: Mar 1 10 at 18:07

Accessing Coordinates In A Nested Geojson File To Draw Polygons With Google Maps API V3
I am having a real pain of trying to draw multiple polygons from a geojson file. Below I have pasted a sample of the geojson file and the javascript used to access it. It seems the main problem I am running into is that I cannot get into that array of coordinates nested in each record as it either returns the error that "coordinates" is undefined or that there is no method "setMap" for undefined. I have been able to return other nested aspects of a similar JSON file (this is a test file, the real one actually has data, just trying to get the polygon drawing here), but getting those coordinates is not working. I am not a javascript master so I can't tell where the code is failing to make the proper access.

[Code]....

Posted: Sep 12 11 at 14:55

Increase Width Of Line / When Mouse Is Moved Where Line Is Drawn From Canvas
how to increase the width of the line when mouse is moved where the line is drawn from canvas and its not an image and the line should increase or decrease gradually along with the mouse.well i will explain in brief.i have created a div with a line drawn in it and once when the mouse is moved over the line and futher moved forward the line should move along with the mouse pointer so that the width of the line should gradually increase and decrease as the mouse moves.

Posted: Mar 28 11 at 5:32

Jquery :: Calculate Coordinates - Center An Arrow
i'm trying to center an arrow in a picture using jquery... the arrow will serve for navigation trought my picture. My problem is i can't center the arrow.... here is my code: I changed the id with the class name and it's still not working ill link the js css and html to you

html/php
<div id="test5">
<img src="<?php bloginfo("template_url"); ?>/images/right.gif" class="right" width="38" height="48" alt="right"/>
<img src="<?php bloginfo("template_url"); ?>/images/left.gif" width="38" height="48" class="left" />
[Code]...

Posted: Feb 10 11 at 21:17

Canvas Can't Draw A Square?
<canvas id="c" style="border: solid 1px black; width: 300px; height: 300px;"></canvas> <script type="text/javascript">
var canvas = document.getElementById("c"),[code]....

Result in : fiddle: http://jsfiddle.net/wong2/xZGUj/

Posted: Jul 20 11 at 6:31

Draw A Spiral In Canvas?
how to draw spirals in canvas using JavaScript. I thought it might be possible to do it with the bezier curve and if that didn't work use lineTo(), but that seemed a lot harder. Also, to do that I'm guessing I would have to use trigonometry and graphing with polar coordinates and its been a while since I did that.

Posted: Jul 26 11 at 1:49

Draw Images In An Arc On A Canvas?
You can draw arcs and you can draw images on a canvas using javascript, but is there anyway to do both? that is, is there anyway to draw an image as the arc instead of a solid line?If not, is there a seperate way to arc an image?

I tried doing a pixel-by-pixel transformation of the image along the points of an arc, but it ended up being very slow and looking pretty poor since I can't directly get pixel data from javascript (or can you? I didnt see a way) so for each pixel, I needed to calculate the point along the arc, draw the current image pixel, refetch it, draw the image data to the calculated point, then clear that point on the canvas.

Posted: Aug 5 11 at 5:01

Draw Arrow On Canvas Tag?
I want to draw an arrow using the canvas tag, javascript. I've made it using the quadratic function, but I'm having problems to calculate the angle of rotation of the arrow...

Posted: Apr 30 09 at 20:18

How To Draw A Line Graph Using Javascript
I have one requirement. Is there any way to create a line graph using javascript....

Posted: October 25th, 2005