Как можно сделать так, чтобы в canvas загружалась картинка либо из мануально указанного url, либо из выпадающего списка? фрагмент кода html:
<select id="image-select">
<option value=""></option>
<option value="http://www.captionite.com/templates/good_guy_greg.jpg">Good guy Greg</option>
<option value="http://www.captionite.com/templates/scumbag_steve.jpg">Scumbag Steve</option>
<option value="http://www.captionite.com/templates/high_expectations_asian_father.jpg">High Expectations Asian Father</option>
</select>
js начала изучать совсем недавно и многое еще непонятно. вот сырой фрагмент кода js:
var canvas = document.getElementById("myCanvas");
var context = document.getContext("2d");
var getImage = function(){
var selectList = document.getElementById("image-select");
var source = selectList.options[selectList.selectedIndex].value;
var img = new Image ();
img.src = source;
};
img.onload = function() {
// Work out where to center it
x = canvas.width/2 - img.width/2;
y = canvas.height/2 - img.height/2;
// Draw it
context.drawImage(img, x, y);
};
getImage();
img.onload();