01.cut-img-set.css

#sample-img{
  display: block;
  width: 60%;
  margin: 0 auto;
}
#canvas{
  display: block;
  width: 30%;
  margin: 0 auto;
}
#contrroller{
  margin: 15px auto;
}
.sel-card{
  height: 1.5em;
  vertical-align: middle;
}
#bt-joker{
  display: block;
  margin-top: 15px;
}
@media screen and (min-width:481px) {
 #canvas{
   width: 100px;
 }
 #contrroller{
   text-align: center;
 }
 #bt-joker{
   margin: 15px auto;
 }
}

02.cut-img-set.html

<canvas id="canvas" width="100px" height="163px"></canvas>
<div id="contrroller">
  <select id="sel-suit" class="sel-card">
    <option value="1">スペード</option>
    <option value="2">ハート</option>
    <option value="3">ダイア</option>
    <option value="4">クラブ</option>
  </select>
  <select id="sel-num" class="sel-card">
    <option value="1">A</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">J</option>
    <option value="12">Q</option>
    <option value="13">K</option>
  </select>
  <button id="bt-joker">jokerを表示</button>
</div>

03.cut-img-set.js

const unit_w = 100;
const unit_h = 162;
const can = document.getElementById('canvas');
const ctx = can.getContext('2d');
const imgset = new Image()
imgset.addEventListener('load',()=>{
  change_card();
});
imgset.src = 'path/to/p-card.png';
const sel_suit = document.getElementById('sel-suit');
const sel_num = document.getElementById('sel-num');
[...document.getElementsByClassName('sel-card')].forEach(sel=>{
  sel.addEventListener('change',change_card);
});
document.getElementById('bt-joker').addEventListener('click',()=>{
  ctx.clearRect(0,0,can.width,can.height);
  ctx.drawImage(imgset,0,unit_h*4,unit_w,unit_h,0,0,unit_w,unit_h);
});

function change_card(){
  ctx.clearRect(0,0,can.width,can.height);
  const sx = (sel_num.value-1) * unit_w;
  const sy = (sel_suit.value-1) * unit_h;
  ctx.drawImage(imgset,sx,sy,unit_w,unit_h,0,0,unit_w,unit_h);
}