Trying to turn the canvas, something goes wrong

Question

Trying to turn the canvas, something goes wrong

So, I'm trying to make a nice interactive map of my office in HTML5 for documentation purposes (tracking phone numbers, port numbers, etc.), and since many of our offices and offices are the same, I believe that I should only have one of each office type, and then just duplicate it for all the offices that it matches. My only problem: I cannot rotate the canvas correctly. I followed all the textbooks, but for some reason my image continues to be interrupted. I can not find the source of the problem.

Any ideas?

Here is my code:

http://jsfiddle.net/pmcDw/1/

<!DOCTYPE HTML>

 <head> <title>Test Interactive Office Schematic</title> <style> html, body { margin: 0px; padding: 0px; } </style> </head> <body> <script> function addOffice(type, id, occupentName) { var canvas = document.createElement('canvas'); canvas.id = id; canvas.style.position = "absolute"; canvas.style.left = "20px"; canvas.style.class = "office"; var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(0, 0); if (type == 1) { canvas.width = 80; canvas.height = 80; context.lineTo(2, 0); context.lineTo(2, 20); context.quadraticCurveTo(22, 20, 22, 0); context.lineTo(60, 0); context.lineTo(60, 80); context.lineTo(0, 80); context.lineTo(0, 0); } context.lineWidth = 2; context.strokeStyle = 'black'; context.stroke(); context.textBaseline = "Alphabetic"; context.textAlign = "center"; context.fillText(occupentName, canvas.width / 2, canvas.height / 2); document.body.appendChild(canvas); canvas = document.getElementById("1"); context = canvas.getContext('2d'); var tempCanvas = document.createElement("canvas"), tempCtx = tempCanvas.getContext("2d"); tempCanvas.width = canvas.width; tempCanvas.height = canvas.height; tempCtx.drawImage(canvas, 0, 0, canvas.width, canvas.height); context.clearRect(0, 0, canvas.width, canvas.height); context.save(); context.translate(canvas.width / 2, canvas.height / 2); context.rotate(180 * Math.PI / 180); context.drawImage(tempCanvas, 0, 0, 80, 80, 40, 40, 80, 80); context.restore(); } addOffice(1, 1, "test"); </script> </body>

-2

javascript html5 canvas

Salmonmode Aug 28 '13 at 17:25

source share

2 answers

The image will not be displayed because you are drawing it outside the canvas. Try the following:

 context.drawImage(tempCanvas, 0, 0, 80, 80, -40, -40, 80, 80);

0

KaliedaRik Aug 28 '13 at 21:06

source share

epistemex · Accepted Answer · 2013-08-28T22:02:59+0000

After translating and turning the context that you want to translate back:

 context.translate(canvas.width / 2, canvas.height / 2); context.rotate(180 * Math.PI / 180); /// here, translate back: context.translate(-canvas.width / 2, -canvas.height / 2); context.drawImage(tempCanvas, 0, 0);

(you do not need to crop and / or specify the width and height if the destination size matches the size of the source).

But if you just want to flip the image or rotate it 180, you can instead use the scale canvas instead of a negative value - just remember to change the coordinates ( here is a demonstration of this method ):

 context.scale(-1, -1); context.drawImage(tempCanvas, -tempCanvas.width, -tempCanvas.height);

More information about the conversion as a whole (update)

To better explain how transformations work, you can go through various stages.

Origo ( see definition here ) is always the point [0, 0] in the coordinate system (or, more precisely, the point where the axes are). When you use transforms, this is the point that translates into context for the canvas.

This is also the reason you are directly manipulating the context, not the canvas, because the transforms apply to the context, not to the element (otherwise the element would be rotated by itself when you applied the rotary transformation to it - which you can do with CSS).

Initially, the coordinate system looks like this (white mixing is the invisible areas of the canvas, the central square is the canvas, and the blue grid is the context and the current coordinate system):

(Note: ignore the negative Y axis - I somehow managed to miss this detail when creating graphics - the y axis, of course, is positively vertically down).

If you now translate canvas 3.5 to 3.5 points, to get Origo in the center, the context and coordinate system will now look like this:

If now we want to apply the rotation that will occur at Origo . That is why we need to translate before rotation, as when applying rotation we get the following result:

If now just to draw an image, it will not be centered. drawImage draws an image from the upper left corner of the image. This means that it will look like this:

That's why we need to move Origo back so that we compensate for the angle of the image.

However, since we also apply rotation, the orig will move relative to the current orientation of the system.

We translate back (half the size of the image to get the center point of the image at the previous Origo point) - the rotation remains unchanged:

Now we can call drawImage , since now you can see that Origo seems to be in the right position for this operation:

Trying to turn the canvas, something goes wrong

More information about the conversion as a whole (update)

More articles: