I was trying to have a wheel on a canvas with multiple equal size segments similar to wheel of fortune. On the circumference of the wheel, i.e arc of each segment, I want to have an image attached that needs to rotate with wheel.
I was able to draw multiple images, but they have be positioned with respect to (0, 0) (top-left) of the canvas only. Is there any way to position them relative to some point instead of the origin? In my case the centre of the circle (300, 300)?
You can translate the origin of your canvas by calling .translate(x, y) method of the canvas drawing context; in your example both x and y would be 300.
See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations for more information on canvas transformations.
Related
I have a known rect (grey) the outer parent element that contains an image element (orange). It's overflow is hidden.
I want to calculate the padding required to allow the image element(known width and height) to be rotated to a known angle (for this e.g. lets say 30 degrees).
It has proven to be relatively easy to calculate this if i were able to allow the parent(grey) element to expand to accommodate, but i can't.
create list of 4 image edge points p0,p1,p2,p3
rotate them the same way as the image will be rotated
double a=x-x0,b=y-y0,c,s;
c=cos(alfa);
s=sin(alfa);
x=a*c-b*s+x0;
y=a*s+b*c+y0;
x,y is the point
x0,y0 is center of rotation
alfa is the rotation angle
compute min,max of rotated points x,y coordinates this gets you the bounding box
summary
let (x0,y0) be the original image gray box size (X,Y) from your image
let (x1,y1) be the original image size (xa,xb) from your image
let (x2,y2) be the rotated image bounding box size (xmax-xmin,ymax-ymin) from bullet 3
if ((x2<=x0)&&(y2<=y0)) the image fits so stop
let mx=x0/x2 and my=y0/y2 be the needed scales to fit the image
do not zoom:
if (mx>1.0) mx=1.0;
if (my>1.0) my=1.0;
now select the correct scale m
m=mx; if (m>my) m=my;
now the m holds the scale needed to apply on rotated image to fit the gray area
do not forget to center the image ...
I just wonder how do the Canvas transformations work. Lets say i have a canvas with a circle drawn somewhere inside of it, and i want to scale the circle, so its center point will not move.
So i thought about doing the following:
translate(-circle.x, -circle.y);
scale(factor,factor);
translate(circle.x,circle.y);
// Now, Draw the circle by calling arc() and fill()
Is it the right way to do it? I just don't understand whether the canvas was designed to remember the order that i call the transformations.
Thanks.
Yes, you are correct.
The canvas accumulates all transforms and applies them to any future drawing.
So if you scale 2X, your circle will be drawn at 2X…and(!) every draw after that will be 2X.
That’s where saving the context is useful.
If you want to scale your circle by 2X but then have every subsequent drawing be at normal 1X you can use this pattern.
// save the current 1X context
Context.save();
// move (translate) to where you want your circle’s center to be
Context.translate(50,50)
// scale the context
Context.scale(2,2);
// draw your circle
// note: since we’re already translated to your circles center, we draw at [0,0].
Context.arc(0,0,25,0,Math.PI*2,false);
// restore the context to it’s beginning state: 1X and not-translated
Context.restore();
After Context.restore, your translate and scale will not apply to further drawings.
Y coordinate of rectangle after rotation on canvas. As shown in image the rectangle will be rotated on its center point axis. After rotation and canvas is restored I want to find the new X,Y coordinates like one shown in second image, before rotation points were 50,50 and after rotation they could be 62,40.
I found similar question so I took the images from there but that question is for some WPF and my requirement is JS. How to find coordinates of all corners of rectangle after rotation?
I made a simple JavaScript transformation class for this exact purpose.
Using it you can transform arbitrary points by a transform of your making.
When you transform the canvas, transform the Transform object in the same way and then call transformPoint(x, y) to get back the appropriate coordinates.
So in your case calling transformPoint(50, 50) would return about [62, 40], etc.
https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js
Here's an example: http://jsfiddle.net/b2fEX/
I have a rounded rectangle at a specific x, y, w, h on a canvas. I first do a context.translate to get the object where I want it, then when it comes to rotating it, this is where I'm having issues working out the math needed.
I can do a simple context.rotate(Math.PI/180 * 25) to rotate it 25degs but it rotates from the x,y. I really want to shift the rotating point to like x + (w/2) and y + (w/2).
I'm not sure how to tell the rotate method to rotate it around a different point. I think I have to rotate it like normal but recalculate x,y perhaps based on the rotation maybe?
The canvas always rotates about the origin (0,0). The ctx.translate command can be thought of as shifting the origin, so you must translate by (x+w/2, y+h/2) before you rotate if you wish to rotate about the center of the rectangle.
(and of course, translate back after, or use save and restore)
I wanted to know if Html5 supports shape translation in canvas..For instance I have a rectangle,is it possible to apply a transformation to it?
canvas = document.getElementById('Canvas');
context =canvas.getContext('2d');
context.rect(myRectangle.x,myRectangle.y,myRectangle.width,myRectangle.height);
There's a few different methods for animating and changing the position that you want to draw your thingy. Either way, if you're after an animation, you're going to need to clear your canvas and keep drawing - like a flip book if you will.
Choices for setting the newly drawn item include:
moveTo - to move to the new position of your thing
translate - to translate the centre point of the canvas and keep the drawing positions the same, but move the underlying coordinate system
.rect(newX, newY, height, width) - drawing the specific position
I mocked together a (contrived) example of using translate on a canvas - which will move the the animating box around the position of your cursor. It's done in a loop - and I'd suggest checking out Paul Irish's article on requestAnimFrame for better animation loops. Here's the example: http://jsbin.com/afofur/2/edit#preview
As the comments say in the previous answer - SVG maintains a object model, so you can reference objects on the page, canvas is a bitmap API (basically), and once the pixels are committed to the canvas, there's no reference to the method or shape behind the drawing, it's just pixels to the canvas API.
No, once it is drawn to the canvas you can't change it anymore, there is no in-memory representation of the shapes you draw on the canvas. However, you can transform the canvas before you draw the shape and reset transform (canvas.setTransform(1, 0, 0, 1, 0, 0)) after you've drawn the shape.
Edit
Remember that the canvas API doesn't keep track of which objects you draw. It just fills the pixels with a color where you ask it to draw a rectangle. If you want to make animations, you will have to keep track of which rectangle you drawn yourself (make an object with properties x, y, width, height). Then you will have to do the following in each animation step:
clear the canvas
update the objects for the new time frame
redraw the canvas
You can find a tutorial here.