Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Separate canvas rotations 1

Status
Not open for further replies.
xwb

xwb

Programmer
Jul 11, 2002
6,828
1
36
GB
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.
 
Sort by date Sort by votes
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?
 
Upvote 0 Downvote
Just worked it out. The sequence is

[ul]
[li]Context save[/li]
[li]Translate to x,y position[/li]
[li]Rotate by angle (Rotate (angle, x, y) does the rotate then the translate)[/li]
[li]Do the drawing
[li]Context restore[/li]
[/ul]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Megabyte512
  • Locked
  • Question
Canvas Profile Picture Edit
Replies
1
Views
44
ChrisHirst
ChrisHirst
emozley
  • Locked
  • Question
Putting a canvas in a div
Replies
1
Views
41
jay8abear
jay8abear
spamjim
  • Locked
  • Question
A drawing canvas as a form field element 1
Replies
1
Views
29
vacunita
vacunita
BabyJeffy
  • Locked
  • Helpful tip
Canvas Tutorial and related Cheat Sheet 1
Replies
3
Views
37
kjv1611
kjv1611
gnubie
  • Locked
  • Question
How to display a header and paragraph separated by only one line break 1
Replies
4
Views
54
gnubie
gnubie

Part and Inventory Search

Sponsor

Back
Top