Forums » Help » style an entity with CSS or js methods

Just wondering if it was possible to style an entity using CSS or other JS methods?

For example, the entity I am making needs a background color, 2px solid border, and an outer gradient. It is circular (defined using Box2D), and the size will be defined at runtime.

CSS would be the preferred method, but if that is not an option, what about an SVG image?

thanks.

It's not an option. Canvas draws have little to do with CSS styles. SVG is also not a native option for Canvas2d. You can, however, draw basic shapes, gradients and shadows with native functions.

Some more info:
http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Adding a border to an entity is very easy. Here is a sample of a circle border with a bit of a gradient.

ig.system.context.globalAlpha = 0.8; ig.system.context.strokeStyle = "rgb(0,0,255)"; ig.system.context.lineWidth = 2; var gradient = ig.system.context.createRadialGradient((this.pos.x + this.size.x/2) - ig.game.screen.x, (this.pos.y + this.size.y/2) - ig.game.screen.y, this.size.x, (this.pos.x + this.size.x/2) - ig.game.screen.x, (this.pos.y + this.size.y/2) - ig.game.screen.y, 0); gradient.addColorStop(0, "rgba(0, 0, 255, 0.3)"); gradient.addColorStop(0.5, "rgba(0, 0, 255, 0)"); ig.system.context.fillStyle = gradient; ig.system.context.beginPath(); ig.system.context.arc((this.pos.x + this.size.x/2) - ig.game.screen.x, (this.pos.y + this.size.y/2) - ig.game.screen.y, this.size.x, 0, 2 * Math.PI, false); ig.system.context.fill(); ig.system.context.stroke(); ig.system.context.globalAlpha = 1;

Thanks!
I put this in my entity's draw method and worked, but it absolutely killed my fps and tick time.
Any ideas why this would be happening?

Drawing is expensive no matter what you are doing but it shouldn't be so expensive that you can't use it. Are you applying this to a lot of entities?

No, just one. The larger the circle, the greater the performance hit.
At the moment, the single circle at 200px wide, drops my FPS to about 15, and ~65ms in the impact debug bar.

Ahh, well... hmmm... I did forget the closePath(). It might make all the difference.

ig.system.context.globalAlpha = 0.8;
ig.system.context.strokeStyle = "rgb(0,0,255)";
ig.system.context.lineWidth = 2;
var gradient = ig.system.context.createRadialGradient((this.pos.x + this.size.x/2) - ig.game.screen.x, (this.pos.y + this.size.y/2) - ig.game.screen.y, this.size.x, (this.pos.x + this.size.x/2) - ig.game.screen.x, (this.pos.y + this.size.y/2) - ig.game.screen.y, 0);
gradient.addColorStop(0, "rgba(0, 0, 255, 0.3)");
gradient.addColorStop(0.5, "rgba(0, 0, 255, 0)");
ig.system.context.fillStyle = gradient; 
ig.system.context.beginPath();
ig.system.context.arc((this.pos.x + this.size.x/2) - ig.game.screen.x, (this.pos.y + this.size.y/2) - ig.game.screen.y, this.size.x, 0, 2 * Math.PI, false);
ig.system.context.closePath();  // added
ig.system.context.fill();
ig.system.context.stroke();	
ig.system.context.globalAlpha = 1;