Gradient a Parallelogram

Posted by nuclearpenguin on Stack Overflow See other posts from Stack Overflow or by nuclearpenguin
Published on 2012-03-28T21:51:59Z Indexed on 2012/03/28 23:29 UTC
Read the original article Hit count: 362

Filed under:

JavaScript

|

gradient

|

shape

I'm working in JavaScript drawing on a canvas, and have four coordinates to draw a parallelogram, called A, B, C, and D starting from the top-left, top-right, bottom-left, and bottom right, respectively.

An example of some coordinates might be:

A: (3, 3)

B: (4, 3)

C: (1, 0)

D: (2, 0)

I can draw the parallelogram just fine, but I would like to fill it in with a gradient. I want the gradient to fill in from left to right, but matching the angle of the shape. The library I use (CAKE) requires a start and stop coordinate for the gradient. My stop and start would be somewhere half way between A and C, and end somewhere half way between B and D. Of course, it is not simply EXACTLY half way because the angles at A, B, C, and D are not right angles. So given this information (the coordinates), how to I find the point on the line A -> C to start, and the point on the line B -> D to stop?

Remember, I'm doing this in JavaScript, so I have some good Math tools at my disposal for calculation.

© Stack Overflow or respective owner

Related posts about JavaScript

CHAT ROOMs 7 by 6

as seen on Stack Overflow - Search for 'Stack Overflow'
I am looking for chatroom on one page with 7 loggedin users and 6+rows for say 42 users.these users will keep on adding wthnew users.Need urgent help.A PRETTY UNUSUAL Q FOR MOST OF U.What is MORE REQ new features: Usernames are unique to users currently chatting You can see a "currently chatting"… >>> More
Integrating JavaScript Unit Tests with Visual Studio

as seen on Stephen Walter - Search for 'Stephen Walter'
Modern ASP.NET web applications take full advantage of client-side JavaScript to provide better interactivity and responsiveness. If you are building an ASP.NET application in the right way, you quickly end up with lots and lots of JavaScript code. When writing server code, you should be writing… >>> More
Has Javascript developed beyond what it was originally designed to do?

as seen on Programmers - Search for 'Programmers'
I've been talking with a friend about the purpose of Javascript, when and how it should be used, etc. He quoted that: JavaScript was designed to add interactivity to HTML pages [...] JavaScript gives HTML designers a programming tool HTML authors are normally not programmers… >>> More
PHP, javascript, single quote problems with IE when passing variable from ajax post to javascript fu

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi! I have been trying to get this to work for a while, and I suspect there's an easy solution that I just can't find. My head feels like jelly and I would really appreciate any help. My main page.php makes a .post() to backend.php and fetches a list of cities which it echoes in the form of: <li… >>> More
Javascript in XSL that is loaded by Javascript

as seen on Stack Overflow - Search for 'Stack Overflow'
Is there anyway to have javascript run when a XSL sheet has been applied to an XML file by Javascript? I am using a JQuery plugin to apply the sheet to the xml but the javascript that is located inside of the XSL file will not run. I put the Javascript at the bottom of the file and it still does… >>> More

Related posts about gradient

Twitter Bootstrap styling conflicts with plug-ins like jqGrid and other third part libraries

as seen on Geeks with Blogs - Search for 'Geeks with Blogs'
Issues:The concern is that the Twitter Bootstrap framework is that some of their css selectors are simply too generic and have incompatibility issues and conflicts with most third party plug-ins and css libraries, like jQuery-UI and jqGrid.My most pressing concern is only with the generic selector… >>> More
UITableViewCell with custom gradient background, with another gradient as highlight color

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a custom UITableViewCell with a custom layout. I wanted a gradient background, so in my UITableViewDelegate cellForRowAtIndexPath: method, I create a CAGradientLayer and add it to the cell's layer with insertSubLayer:atIndex: (using index 0). This works just fine except for two things: Most… >>> More
Gradient fill bitmap and CreatePatternBrush just gives black fill instead of gradient

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to create a Gradient Brush in windows mobile as follows: HBITMAP hBitmap = CreateBitmap(16, 16, 1, 16, NULL); HDC hDC = CreateCompatibleDC(NULL); HBITMAP hPrevious = SelectObject(hDC,hBitmap); TRIVERTEX vert[2]; GRADIENT_RECT gRect; ... fill in vert and gRect GradientFill(hDC… >>> More
How to implement Cross Browser Opacity Gradient (Not Color Gradient)

as seen on Stack Overflow - Search for 'Stack Overflow'
How can I implement cross browser opacity gradient (not color gradient)? See following code: <div style="background-color:Red;display:block;height:500px;width:500px;filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=500)"></div> It works fine… >>> More
3x3 Sobel operator and gradient features

as seen on Stack Overflow - Search for 'Stack Overflow'
Reading a paper, I'm having difficulty understanding the algorithm described: Given a black and white digital image of a handwriting sample, cut out a single character to analyze. Since this can be any size, the algorithm needs to take this into account (if it will be easier, we can assume the size… >>> More