CODEWITHSUNDEEP
javascripthtmlcanvas
yeeen
yeeen

Reputation: 4945

Why doesn't translate works for the canvas in a div?

I have 2 canvas in a div. I tried to translate one of the canvas, but it didn't work.

http://jsfiddle.net/VkbV5/ shows the case where i commented off the translation line:

this.innerElement2Ctx.translate(100,100);

But when I include the line, the small square disappeared. Why? If you run this page in browser and inspect the innerElement2, you will see that it didn't move at all, but the small square disappeared.

For your information, I need 2 canvas, because I am planning to attach mouse event to innerElement2.

Upvotes: 2

Views: 701

Answers (1)

Phrogz
Phrogz

Reputation: 303168

Translating a context adjusts where the 0,0 point is for future drawing commands; scaling a context adjusts how large items draw on the canvas; rotating a context adjusts the direction that items are drawn. None of these context transformations adjust the size or position of the canvas box itself.

Here's an example I made of adjusting canvas transformation so that drawing the same commands allows the user to zoom and pan around a canvas drawing:
http://phrogz.net/tmp/canvas_zoom_to_cursor.html

If you want to move the placement of a canvas within your HTML page, use simple CSS placement as you would with any other element, e.g. a <div>.

If you want complex 2D or 3D transformations you can use cutting edge features of CSS for this (as supported by modern browsers). For example, see:
https://developer.mozilla.org/en/CSS/transform#CSS_transform_functions

Upvotes: 3

Related Questions