javascript - Canvas image src from hosted file -

currently calling canvas source images imgur, host them within app, "images/soundwave.png"... .. given current code, cant figure out how that.

if helps @ using middleman

<script>   var imgbg = new image(),       imgfg = new image(),       count = 2;   imgbg.onload = imgfg.onload = init;   imgbg.src = "http://i.imgur.com/hrhh9vo.png";   imgfg.src = "http://i.imgur.com/wojggn0.png";    function init() {       var canvas = document.queryselector("canvas"),          ctx = canvas.getcontext("2d"),          audio =  document.queryselector("audio");      canvas.width = 500;     canvas.height = 120;      render();      audio.addeventlistener("timeupdate", render);      function render() {       ctx.clearrect(0, 0, canvas.width, canvas.height);       ctx.drawimage(imgbg, 0, 0, canvas.width, canvas.height);         // calc progress       var progress = audio.currenttime / audio.duration;        // draw clipped version of top image       if (progress > 0) {         ctx.drawimage(imgfg, 0, 0, imgfg.width * progress, imgfg.height,  // source                              0, 0, canvas.width * progress, canvas.height); // dst       }     }   } </script> 

any appreciated

in source directory can create images folder , put images in there.

then, can either set image src app url or relative uri (e.g. /images/hrhh9vo.png).

then, if need embed image in page can use image_tag template helper.