Forums » Help » Using native canvas methods in an entities draw function with transparent rgba fillstyle

Greetings impacters!

I'm working on a stealth/sneaking style top down view game and trying to show field of vision cones for the enemies. My thought was that I could just use the native canvas methods based on my AI controlled entities position. This all works fine except that when I try to set the ctx.fillStyle to a transparent color, rgba(255,0,0,0.6) or something similar, the result does not paint the background layer under the fill. However, if I simply stroke the ctx path with a decently thick lineWidth and a similar strokeStyle, the lines for the path are rendered transparent with the background tiles showing underneath the stroke. Any thoughts? Some psuedo-ish code to explain what I'm doing:

// In some enemy entity
...
draw: function() {
  // Retrieve and store canvas ctx
  var ctx = ig.system.context;
  ctx.save();

  // The actual implementation is a little more complicated, but irrelevant to my problem
  // This is just to give you an idea of what I'm trying to do
  ctx.moveTo(this.pos.x,this.pos.y);
  ctx.lineTo(this.pos.x + this.filedOfVision.radius, this.pos.y);
  ctx.arc(this.pos.x,this.pos.y,this.fieldOfVision.radius, 0, (this.fieldOfVision.sweepAngle * (Math.PI / 180)));
  ctx.closePath();

  // This works as I would expect with the background visible under the transparency
  ctx.strokeStyle = 'rgba(255,0,0,0.5)';
  ctx.stroke();

  // This draws on the canvas, but there is no background under the field of vision cone
  ctx.fillStyle = 'rgba(255,0,0,0.5)';
  ctx.fill();

  ctx.restore();

  this.parent();
},
...

* UPDATE *

I've found that the problem has to do with the fact that I have another entity that is using native canvas drawing functions as well and setting the fillStyle for it's particular need to black. Now I have to find out why the fillStyle is not getting reset on subsequent calls...

* SOLVED *

The issue had to do with my inadequate knowledge of canvas context native functions... I was calling ctx.rect() with a black fillStyle, but without wrapping it with beginPath() and closePath()...

::facepalm::

Hey! Thanks for posting both your problem and the solution! ( ;

Have you seen ctx.save and ctx.restore? Those might help you manage the state machine of your canvas.