×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Separate canvas rotations

Separate canvas rotations

Separate canvas rotations

(OP)
I'm trying to draw a series of shapes made up of lines, all at different rotations. If I use the context translate/rotate, it rotates the whole canvas. What I'm looking for is the canvas equivalent of SVG's

CODE

<g id="STE1" transform="translate(54 98)">
<text x="-30" y="20">143:44:1</text>
<text x="-30" y="32">NWest</text>
<g id="SRE1" transform="rotate(14)">
<line x1="0" y1="-10" x2="0" y2="10" style="stroke:blue;stroke-width:2" />
<line x1="-7" y1="5" x2="0" y2="-7" style="stroke:blue;stroke-width:2" />
<line x1="0" y1="-7" x2="7" y2="5" style="stroke:blue;stroke-width:2" />
<line x1="7" y1="5" x2="0" y2="-3" style="stroke:blue;stroke-width:2" />
<line x1="0" y1="-3" x2="-7" y2="5" style="stroke:blue;stroke-width:2" />
<line x1="-3" y1="10" x2="0" y2="7" style="stroke:blue;stroke-width:2" />
<line x1="0" y1="7" x2="3" y2="10" style="stroke:blue;stroke-width:2" />
</g>
</g> 
With SVG, every group can have a different rotation. I can't seem to be able to do this with Canvas.

Also - has anyone managed to get canvas working with IE9? It doesn't seem to recognize getContext.

RE: Separate canvas rotations

(OP)
After much searching I found that IE9 needs <!DOCTYPE HTML> before you can use canvas. OK, that problem is fixed. I still can't figure out how to do rotations other than actually applying a transformation matrix to the lines before drawing them. I don't think that is very efficient in Javascript. Is there a better way?

RE: Separate canvas rotations

(OP)
Just worked it out. The sequence is

  • Context save
  • Translate to x,y position
  • Rotate by angle (Rotate (angle, x, y) does the rotate then the translate)
  • Do the drawing
    [li]Context restore

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login


Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close