Canvas y 'animaciones'

[Carlangueitor]

Revisé el primer archivo JS (que no es lo que te genera problemas, pero si así haces todo tienes problemas), es malo:

Código Javascript:

document.getElementById('TestNombre').style.width = (950*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.height = (40*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.marginTop = (100*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.marginLeft = (15*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.width = (950*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.height = (40*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.marginTop = (100*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.marginLeft = (15*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.fontSize = (22*this.ProportionResolutionY) + 'px';
 

Haces la busqueda en el DOM 8 veces, fuera de que sea una mala práctica por el código duplicado eso carga demasiado, deberías hacer algo así:

Código Javascript:

var testNombre = document.getElementById('TestNombre');
 

Y trabajar con ese objeto.

Luego eso es lo que pasa, por cada punto, cada vez que se mueve haces el lookup:

Código Javascript:

document.getElementById('Point'+this.ID).style.webkitTransform = 'translate('+this.CoordinateX+'px,'+this.CoordinateY+'px)';
 

Cachea el elemento y llamalo cuando lo necesites.

Saludos