Question

We all know to set canvas’s context property like this:

ctx.textBaseline = "top";
ctx.shadowColor = "#000";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 10;

But if I have json format data like this:

{textBaseline: "top",
shadowColor: "#000",
shadowOffsetX: 10,
shadowOffsetY: 0,
shadowBlur: 10}

How to set ctx’s property by the above data?

I can do like that:

function setctxproperty(jsondata) {
    if (jsondata[textBaseline]) {
        ctx.textBaseline = jsondata[textBaseline]; 
    } else if (jsondata[shadowColor]) {
        ctx.shadowColor = jsondata[shadowColor]; 
    } else if (...) {
        ...
    }
}

Do you have any good way?

Thanks.

Answer 1

There’s a better way. You can use something like this:

function setProps(data) {
   for (var p in data) {
     if (!data.hasOwnProperty(p)) continue;
     ctx[p] = data[p];
   }
}