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();">