Getting data/image from <select> value and paste it in <canvas>

help
1

i’am new here so I hope that I’am asking the right question in the right place . First of all I searched in the website to find some solution for my problem , but I didn’t succeed . So further more I decide to ask you to step in and help me . Literally i’am trying to paste some data/image from the dropdown menu to the canvas.

main.html

 <main>
    {{>canvas}}
   ...
    {{>selectValue}}
  </main>

<template name='canvas'>
  <canvas id="myCanvas" class='background' width="400" height="200" style="border:1px solid #000000;"></canvas>
</template>

<template name='selectValue'>

  <select id="dropdown">
    <option value='' disabled="disabled" selected="selected">Please Select</option>
    {{#each categories}}
    <option value="{{this}}">{{this}}</option>
    {{/each}}
  </select>


</template>

and here is my attempt to get the value of every select , but it doesn’t work. main.js

Template.selectValue.helpers({
  categories: function () {
    return ["Option 1", "Option 2", "Option 3"]
  }
});

Template.selectValue.events({
  "change #dropdown": function (event, template) {
    var selectValue = template.$("#dropdown", '.background').val();

    console.log(selectValue);

  }
});
2 

<template name='selectValue'>

  <select id="dropdown">
    <option value='' disabled="disabled" selected="selected">Please Select</option>
    <option id='OptionOne' img-src='/img/person.png'>Option 1</option>
    <option id='OptionTwo' img-src='/img/progress.png'>Option 2</option>
    <option id='OptionThree' img-src='/img/success.png'>Option 3</option>
  </select>


</template>

I got it to this solution , but still i don’t know how to display the images in the canvas from the