I see this was the second javascript question you posted here and it is unfortunate that there have been no responses in the nearly four years since then. Perhaps you have learned a few things about JavaScript since then.
Looking at the draw
method I see that it stores a reference to this
in a variable called self
. This pattern happens frequently in JavaScript code but it is unnecessary. I see that some of the functions in table
utilize self
but that could be avoided by binding those functions to this
with Function.bind()
.
It also appears that ctx
is passed to each function as a parameter, which is also unnecessary because ctx
is hoisted at the top-level and visible within each function as well.
The functions in table
associated with keys "["
and "]"
could be simply set to ctx.save.bind(ctx)
and ctx.restore.bind(ctx)
, respectively. Furthermore, the functions in table
associated with keys "+"
and "-"
can be set to ctx.rotate.bind(ctx, this.angle)
and ctx.rotate.bind(ctx, -this.angle)
, respectively.
I'm not sure if those changes will be enough to reduce the CPU load. If not, then consider taking out function calls (i.e. calling table[char]
) and using a series of if
statements or switch
statement in the for
loop.