部分屏幕外的画布元素

Question

我有帆布形式的这种财富轮，但它是一个有艺术家名字的唱片。 我希望它部分在屏幕外，因此只有20％的画布在我的屏幕右侧出现峰值。

这就是我所拥有的，但是屏幕在右侧不断变大，不是切断画布而是制作它以便向右滚动。

HTML

<section id="spin">
<canvas width="800" height="600" id="canvas"></canvas>
<img id="spin_button" src="images/images/spinit.png" alt="Spin" onClick="startSpin();" />
</section>

CSS

spin
{
position: relative;


  canvas{
  background-image: url(../../images/images/spinrecord.png);
  width: 694px; height: 721px;
  position: relative;
  z-index: 999;
  margin-top: -700px;
  overflow: hidden;
  right: -1000px;
margin-right: 1000px;
  }

  #spin_button{

  }
}

我一直在尝试很多不同的事情，但我似乎找不到合适的解决方案。