var g_image_list = [create_image("http://placekitten.com/148/148"),
create_image("http://placekitten.com/248/248"),
create_image("https://images.squarespace-cdn.com/content/v1/543593e4e4b0bf8b316933e3/1504286897079-V3OLCF6NQ1P06SZSE2G1/image-asset.png")];

var g_index = 0;


function onFrameChange()
{
  var sliderBar = document.getElementById('image_slider');
  var output = document.getElementById('index');
  output.innerText = parseInt(sliderBar.value);
  
  g_index = parseInt(sliderBar.value);
  updateCanvas();
}

function create_image(url){
    var img = new Image();
        img.src = url;
    return img;
}

function updateCanvas(){
    console.log("image loaded");
        drawImage(g_image_list[g_index]);

}

function drawImage(img){
    var ctx = document.querySelector("canvas").getContext("2d");
    ctx.drawImage(img, 0, 0, 500, 500);
}

canvas{
    border: 1px solid black;
}

<canvas width="500" height="500"></canvas>

<div id="index">0</div>

<input type="range" min="0" max="2" class="slider" value="0" id="image_slider" oninput="javascript:onFrameChange();">