CODEWITHSUNDEEP
javascripthtmlcanvasdraw
tehaaron
tehaaron

Reputation: 2250

html5 canvas draw circle variables with extra data

So I am basically trying to create a seating chart that will mark spots with circles and then onMouseover displays a tooltip with the person’s first name, last name, and maybe some other information. I will likely be using Kinetic.JS for region/tooltip support as I seem to come across tutorials for it most often.

I would like to create 1 variable per person that contains not only the naming info, but also some details about the circle, this may be simple but I am new to JS in general. This is what I have come up with more as theory since it doesn’t seem to actually work this simply:

Function seat(centerX, centerY, radius, fillStyle, firstName, lastName, id) {
    This.centerX=ctx.arc(centerX);
    This.centerY=ctx.arc(centerY);
    This.radius=ctx.arc(radius);
    This.fillStyle=ctx.fillStyle;
    This.firstName=firstName;
    This.lastName=lastName;
    This.id=id;
}
var johnSmith = new seat (100, 120, 10, #999, John, Smith, 123);

                var canvas = document.getElementById("seatingChart");
                var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.arc(johnSmith);
    ctx.moveTo(…);
    ctx.arc(nextPerson);
    ect…

I know in order for a circle to work properly I need to have the last part of the arc info somewhere ctx.arc(.., .., .., 0, 2 * Math.PI, false); I am just not sure where it should be so i don't have to repeat it for every variable?

Would someone be willing to help me set this set up in the proper way? I am currently working my way through a JS book, but simply can’t seem to get this setup properly..

Thanks

Upvotes: 1

Views: 2647

Answers (2)

Rickard
Rickard

Reputation: 676

As jcubed says: "You cannot pass an object to arc containing those properties."

What you could do is to create your own function like:

context.fillPerson = function(p){
    this.fillStyle = p.fillStyle;
    this.arc(p.centerX,p.centerY,p.radius,0,2*Math.PI,false);
    this.fill();
}

If you do it this way, you can also easily change how to draw a person in the future.

If you only want it to be easier to draw cricles in general you could do:

context.circle = function(x,y,r){ this.arc(x,y,r,0,2*Math.PI,false); }

Upvotes: 2

John Stimac
John Stimac

Reputation: 5491

You cannot call functions in javascript like that. You have to have comma separated parameters, like ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);. You cannot pass an object to arc containing those properties.

Do:

ctx.beginPath();
ctx.fillStlye = johnSmith.fillStyle;
ctx.arc(johnSmith.centerX, johnSmith.centerY, johnSmith.radius, 0, 2 * Math.PI, false);
ctx.fill();

for every person, like in a for loop or something.

Upvotes: 2

Related Questions