How can I improve code quality in javascript image player? [closed]

I’ve made some image player by javascript.
It uses global variables to draw images.
It is hard to understand my code.
Because It is not intuition.

If there are many images, This code maybe cannot works.
How can I improve code quality?
I’m newbie of javascript.
please help me.

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