CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
AlaskaKid
AlaskaKid

Reputation: 307

Scaling canvas together with elements over it

I'd like to get some ideas on how to implement this.

Here is the sketch:

sketch

Description: I have a scene (canvas on the sketch) and let's say 2 panels. Canvas lays in the DIV with position relative, panels are outside of this DIV and there are some elements over this DIV with position absolute. All these elements are draggable. Every element is a div with inner canvas.

Problem: I need to implement zoom of this canvas somehow. I am zooming canvas (there is a grid drawn on it) and elements are zooming as well. It could be scaling (I know about quality after scaling bitmap, it's acceptable in my case). The only problem I don't really know how to solve is how to scale both canvas and independent elements which are over it, that we have an illusion that scene is scaling. Hope you've got the idea what I am trying to do.

Upvotes: 2

Views: 191

Answers (1)

andrewmu
andrewmu

Reputation: 14534

If your target browsers support CSS3 transforms, you could apply a transform to your floating divs to match the one in the canvas, e.g. set style to transform: scale(1.5,1.5).

Note: you'll probably want the div wrapping the canvas and the absolute divs to have overflow: hidden so that you only show things in that area.

Upvotes: 1

Related Questions