Retrieve properties of shapes on HTML5 canvas

Question

I have already drawn few rectangles using a loop in easeljs. They aren't filled with any color. If I want to fill them later, do I have to redraw those again? I have to save their co-ordinates then. Next if I wanted to know if any one is filled, is there any function for doing so? I am new to canvas and easeljs.

 optionChecks[oIndex] = new createjs.Shape();
 optionChecks[oIndex].graphics.beginStroke("blue");
 optionChecks[oIndex].graphics.setStrokeStyle(2);
 optionChecks[oIndex].graphics.drawRect( canvas2.width*0.05 ,pHeight+20 ,20 ,20);

This loop continues for 5 values of oIndex.

Answer 1

The best way to do it, I think, is to create custom object that will keep those values for you.

This custom object can also contains functions that will draw or fill the shape for you while keeping the current state.

I just made a jsfiddle that demonstrate this.

In this example, you can create object like this:

obj1 = new canvasObj(0, 0, 10, 10); //x, y, width, height

and call function like this:

obj1.draw(); //This will set isDrawn value to true

So now, you can check whether your object is drawn or not like this:

alert("is obj1 drawn: " + obj1.isDrawn);

Hope this help!

---

Edit

---

In your case, instead of obj1 = new canvasObj... , you could use optionChecks[oIndex] = new canvasObj... .

You can then add in the "constructor" this.shape = new createjs.Shape(); .

Now, this.shape will be available in every canvasObj functions. So in the function named draw, you could replace this:

ctx.rect(this.x, this.y, this.width, this.height);
ctx.stroke();

by this:

this.shape.graphics.beginStroke("blue");
this.shape.graphics.setStrokeStyle(2);
this.shape.graphics.drawRect( canvas2.width*0.05 ,pHeight+20 ,20 ,20);

See this update jsfiddle that now use easeljs.