Estoy usando 19 imágenes para hacer esta animación lo que pasa es que a veces como que parpadea y a veces da la animación perfecta, pensé en meter las 19 imágenes en solo 1 y solo ir cambiando el posicionamiento de la imagen las imágenes miden 800*800, no se si esto las debo redimensionar y meterlas en una sola imagen y esto se solucionara?

¿Cargas 19 imagenes? No hagas eso xD

Mételas en un sprite y posiciona sobre la que te interese en cada frame de la animación.

O a las malas intenta precargar las 19 imágenes para que no tengas el flick que ves (que se da por la espera en cargar la imagen). Puedes precargarlas con JS y luego ya haces lo que te de la gana. Pero vamos, es más limpio y óptimo hacer un sprite.


Saludos

Hola muchas gracias, por sus respuestas y una disculpa por contestar apenas, voy entrando y realice la supuesta 'solución', metí las 19 imágenes a un spritesheet, pero ahora obtengo este resultado, que me da como una salto va bajando las manos y usando la otra tecnica de cargar 19 imágenes no pasaba esto.

Anterior mente lo que pasaba era de que parpadeaba mi imagen, ahora como que no corre todos los frames, les dejo ambos códigos para que vean como lo ejecuto y ejecutaba:
Este es el antiguo cargando 19 imágenes:

canvas_spr=document.getElementById("myCanvas");
          canvas_spr.width= 145;
          canvas_spr.height= 175;
          var time_changecaracter;
          var cc=1;
          var tiempo_edit=30;
          var url_spr = "../Avatar/000001/";
          var ctx_spr=canvas_spr.getContext("2d");
 
          var img_spr= new Image();
          img_spr.src= url_spr;
          ctx_spr.drawImage(img_spr,0,0,145,175);
          time_changecaracter= setInterval(function(){
          switch(cc){
          case 1:img_spr.src= url_spr+ cc+ ".png";break;
          case 2:img_spr.src= url_spr+ cc+ ".png";break;
          case 3:img_spr.src= url_spr+ cc+ ".png";break;
          case 4:img_spr.src= url_spr+ cc+ ".png";break;
          case 5:img_spr.src= url_spr+ cc+ ".png";break;
          case 6:img_spr.src= url_spr+ cc+ ".png";break;
          case 7:img_spr.src= url_spr+ cc+ ".png";break;
          case 8:img_spr.src= url_spr+ cc+ ".png";break;
          case 9:img_spr.src= url_spr+ cc+ ".png";break;
          case 10:img_spr.src= url_spr+ cc+ ".png";break;
          case 11:img_spr.src= url_spr+ cc+ ".png";break;
          case 12:img_spr.src= url_spr+ cc+ ".png";break;
          case 13:img_spr.src= url_spr+ cc+ ".png";break;
          case 14:img_spr.src= url_spr+ cc+ ".png";break;
          case 15:img_spr.src= url_spr+ cc+ ".png";break;
          case 16:img_spr.src= url_spr+ cc+ ".png";break;
          case 17:img_spr.src= url_spr+ cc+ ".png";break;
          case 18:img_spr.src= url_spr+ cc+ ".png";break;
          case 19:img_spr.src= url_spr+ cc+ ".png";cc= 0;break
        };
          ctx_spr.clearRect(0,0,145,175);ctx_spr.drawImage(img_spr,0,0,145,175);cc++},tiempo_edit);
 

---

Ahora estoy estoy haciendo usando el spritesheet

var sprite_spr,sprite_sheet,canvas_spr;
    function sA01 () {
      window.requestAnimationFrame(sA01);
      sprite_spr.update();
      sprite_spr.render();
    }
     function sprite (options) {
    var that = {},frameIndex = 0,tickCount = 0,ticksPerFrame = options.ticksPerFrame || 0,numberOfFrames = options.numberOfFrames || 1;
    that.context = options.context;
    that.width = options.width;
    that.height = options.height;
    that.image = options.image;
    that.update = function () {
            tickCount += 1;
            if (tickCount > ticksPerFrame) {
              tickCount = 0;
                if (frameIndex < numberOfFrames - 1) {
                    frameIndex += 1;
                } else {
                    frameIndex = 0;
                }
            }
        };
    that.render = function () {
      that.context.clearRect(0, 0, that.width, that.height);
      that.context.drawImage(
        that.image,
        frameIndex * that.width / numberOfFrames,
        0,
        that.width / numberOfFrames,
        that.height,
        0,
        0,
        that.width / numberOfFrames,
        that.height);
    };
    return that;
  }
          canvas_spr=document.getElementById("myCanvas");
          canvas_spr.width= 145;
          canvas_spr.height= 175;
          sprite_sheet = new Image();
          sprite_spr = sprite({
              context: canvas_spr.getContext("2d"),
              width: 2755,
              height: 175,
              image: sprite_sheet,
              numberOfFrames: 19,
              ticksPerFrame: 3
            });
          sprite_sheet.addEventListener("load", sA01);
        sprite_sheet.src = "../Avatar/000001/spritesheet.png";