I just started working with canvas in HTML5 and with javascript. I'm pretty satisfied with my game so far: http://xenopal.dk/game-v1.1/. But I'd like to implement lighting as well in the style of Terraria or Minecraft http://www.nerd-age.com/wp-content/uploads/2011/09/Terraria-New-Torches.png where you can have multiple light sources, even with color, without it being like realistic shadows that gets casted by the light.

I've tried to do per-pixel lighting, but that didn't go so well since it made my whole game lag like crazy and unplayable. I might have done the per-pixel lighting wrong since I'm fairly new to creating games in canvas.

I hope that you're able to help me or maybe pass on some links to other places that might be able to help. Thank you :)

// Edit - Probably forgot to mention that it should of course be a 2D lighting. I've read somewhere that even with three.js and pixi.js I might be able to create this kind of lighting, but I have no idea on how to do it.


1 Answer 1


One way to apply light effects with the Context2D is to use the composite operation 'lighter' (globalCompositeOperation='ligther'), and adjust the alpha (globalAlpha= 0.0 to 1.0).
Then you can either :
• Draw the shape of the light with several geometric drawings that create a simple shade to get a cartoonish light effect.
• Define gradients to get a more realistic effect.

I did a small and simple demo here :

enter image description here

You can see that, by using clipping, the left (cartoonish) light does not affect the blue orb.
With a variation based on a simple sin(time) i did the a small oscillation of the light size to add a 'torch' effect.

I hope this can inspire you for your game.
Notice that you could do a multi-pass light rendering that would also darken parts of the canvas : be aware that the 'darken' composite mode does not work on all browsers (sorry i forgot which does what), but anyway it doesn't matter because it is not required : just apply a dark (#000) fillStyle in the default ('source-over') globalCompositeOperation with the right globalAlpha and you'll darken the filled area.

  • \$\begingroup\$ You can move the fiddle into a stack snippet, so that the link doesn't possibly rot in the future (slim possibility, but still there). \$\endgroup\$ Aug 18, 2015 at 13:44
  • 1
    \$\begingroup\$ Well i quite agree but for this fiddle i re-used my 'basic' fiddle so there's far too much code that isn't relevant.... I'm sure someone will let me know if jsfiddle goes down !!! :-) \$\endgroup\$ Aug 18, 2015 at 13:51
  • \$\begingroup\$ Ah, didn't notice the polyfills and setup at first. \$\endgroup\$ Aug 18, 2015 at 14:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .