Develop Reference

jsPDF rotate an image around its own center

I am using jsPDF to create a PDF from existing objects in my canvas. Thus I have the coordinates and the rotation angle of my objects, I want to then add to my PDF. However, every image doesn't rotate around its own center, thus it changes the coordinates drastically.
var doc = new jsPDF('p', 'mm', 'a3');
doc.addImage(image, 'PNG', 100, 100, 52.916667, 52.916667, null, null, 45);
doc.save('a3.pdf');
Can somebody help me rotate the image around its own center?
Here is a jsFiddle
https://jsfiddle.net/bx0ucszo/6/

I have the same Issue, You can solve it by playing with the degrees in X and Y for the position.
Meaning that if when you rotate your img 45 degrees it descends some pixels on Y, my solution was to put a negative value for Y, for example -100 instead of 100
Hope it's usefull for you

Attempting to create a single map image from tiles using canvas element

I have a bunch of png map tiles that I am trying to stitch together on a canvas element.
jsFiddle
I am making a 10x10 tile with a counter from 0 to 99 (id) to keep track of where I'm up to. This is the line that plots the image:
ctx.drawImage(this, id%10*imgWidth, Math.floor(id/10)*imgHeight, imgWidth, imgHeight);
Where id is some number from 0 to 99, imgWidth is the width of each tile and imgHeight is the height of each tile.
I am reasonably confident that should work, but it appears to just plot one stretched tile on the canvas instead of all 100. When I check the console for what was loaded, the images appear to be the correct shape and contents for each tile. The just don't seem to have been placed on the canvas. Does anyone have any ideas?

One reason to not use jQuery with canvas:
$('canvas').width(imgWidth*10).height(imgHeight*10);
:) as this refers to the element size, not the bitmap. I would suggest using instead:
myCanvas.width = imgWidth*10;
myCanvas.height = imgHeight*10;
Modified fiddle

Wrong size bounding box using THREE.js

I'm working on a project in which I create 3d Widget to rotate, scale and translate a mesh. The Widget I'm creating should adapt to each different 3d object that is present in my scene. Therefore i get the bounding box of the "selected" 3d object and based on the bbox.size() i know how big and where to put the widgets.
The probelm I'm facing is:
look at the image
Basically if I get the bbox of the blue clock and print the size is:
{x: 13.435844927051697, y: 20.660064093076173, z: 9.228819840426326}
While the size of the bbox of the green clock is {x: 87.35781379326076, y: 84.16006027837891, z: 210.26757627254415}, but they should be exactly the same. Please note that the green clock is a child of the Cabinet, while the blue clock is child of the Scene

how to make rectangle scale vertically animation in Raphael JS

The Raphael Js website is down so I can't find any documentation or anything on how to do this. I want to create a rectangle with initial vertical size of 0 and make it animate so that it gets vertically larger and larger when I click another object. Thanks!
so i've got a rectangle
var water = paper.rect( 0, 300, 600, 0).attr({fill:"blue"});
how do I make it animate?

In particular, check out the documentation for
Element.attribute(),
Element.animate(),
Element.click(), and
Raphael.animation().
The following snippet demonstrates a simple animation like the one you are looking for. Click the red square to make the water "fill". It may not work in some browsers (e.g. Chrome) possibly because the snippet is trying to access an external third-party library, i.e. Raphael.js. So, to run it, either go to this SO question/answer page on Firefox or copy the code and run it on your own computer.
Note that, to make the water "fill" in the up direction, you can't just increase the height of the water rectangle...that would make the rectangle grow downwards. You also have to simultaneously raise the top of the rectangle by the identical amount. Thus you have to animate height and y simultaneously, as shown in the code.
UPDATE: provided an up-to-date link for the Raphael minified library
var paper = Raphael(0, 0, 500, 120);
var button = paper.rect( 10, 10, 40, 20).attr({fill:"red"});
var water = paper.rect( 10, 100, 400, 0).attr({fill:"blue"});
var anim = Raphael.animation({
height: 60,
y: (100 - 60)
}, 2000);
button.click(function() {water.animate(anim);});
<script src="https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.min.js"></script>
To get the animation to start, click on the red rectangle.

Calculating rotated relative positions on 2D plane

For a game project, I need to calculate positions of items on a 2D plane relative to the camera.
Camera can be rotated, and it's coordinates refer to it's center.
In the attached images, a and b are items to display and c is camera.
First image is absolute positions of items in the world.
Second image is the result I'm trying to get.
Please note that rotation doesn't have to be 90 degrees, it can be any valid angle. I just used 90 degrees to keep this example simple.
Normally this is an easy task, but because camera can be rotated, translating to/from the center is not that easy, and it makes this problem complicated.
This is not using canvas element, so using canvas translation or rotation is not an option.
Here is the data used in this example, and some boilerplate code for trying solutions:
var items = {
a: {x: 3, y: 3},
b: {x: 2, y: 4}
};
var camera = {
x: 4, y: 4,
width: 4, height: 4,
rotation: 90
}
boilerplate code on jsfiddle.net
Any help would be appreciated.

You should do these steps to achieve your result
Translate the origin to the C point
Rotate your points by Rotation matrix
Return back the origin to its original position
At this point, your items and camera has been rotated, the only work that still is left, is the clipping by camera rectangle.
As far as I know such a clipping is not very hard and can be done easily.
Hope it helps you