How can I convert shadow angle and depth into an HTML5 canvas shadowOffset representation

Question

I need to convert a given angle and depth for a shadow into an html5 canvas shadowOffset representation.

For example:

var angle = 90;
var depth = 10;

should return shadow offsets as follows:

context.shadowOffsetX = 10;
context.shadowOffsetY = 0;

and if...

var angle = 135;
var depth = 15;

then the shadow offsets should be:

context.shadowOffsetX = 15;
context.shadowOffsetY = 15;

While I am certain that this is a simple mathematical calculation, i truly have no idea where to begin. Therefore I am unable to post what I have tried so far. Math really is not my strong point.

If anyone can help I would be extremely grateful.

Answer 1

It is quite simple :

var angleInRad = angle * 2 * Math.PI / 360 ;
context.shadowOffsetX = depth * Math.cos(angleInRad) ;
context.shadowOffsetY = depth * Math.sin(angleInRad) ;

You might want to use Math.trunc on the offsets.