2

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.

Improve this question

2 Answers 2

Reset to default
1

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.