CODEWITHSUNDEEP
htmlcanvasdrawinghtml5-canvas
mike628
mike628

Reputation: 49351

Accessing html5 canvas objects

I have a KineticJs project where I am creating several rectangles with a loop. I am not giving them any type of PII. But using the drag component , I am able to drag them separately. What's going on behind the scenes of canvas that we cant see anything in developer tools. I'd like to be able to see what is going on, like the x and y coordinates of everything I have on the screen.

<canvas width="1578" style="width: 1578px; height: 1200px; position: absolute;" height="1200"></canvas>

That is all that is displayed in developer tools for a canvas with 10 rectangles.

Upvotes: 2

Views: 507

Answers (2)

Simon Sarris
Simon Sarris

Reputation: 63812

The canvas is just a bitmap drawing surface. Like MS Paint (or a paint canvas in real life), the drawing surface has no memory of the stuff you've drawn on it. All it can do is tell you about current pixels.

Either KineticJS or you need to keep track of every relevant object that you want to remember.

In KineticJS, you have a Stage object that has Layers, and those layers have Groups and Shapes.

You're interested in getting all of the Shapes in a given layer.

You need to look for that in the KineticJS tutorials and documentation.

You should read these before continuing:

https://github.com/ericdrowell/KineticJS/wiki

http://kineticjs.com/docs/

Upvotes: 1

lostsource
lostsource

Reputation: 21830

A <canvas> does not keep a reference to 'shapes' drawn onto it. It really is just a drawing surface so its up to the script (or library) which is doing the drawing to do the logic and keep reference to any drawn shapes.

If you want something with that kind of native functionality you should have a look at the <svg> element. There you would be able to see (and reference) <rect> elements

More information about svg here: https://developer.mozilla.org/en/docs/SVG

Upvotes: 0

Related Questions