특정 영역만 선택하여 png 파일로 저장 질문드려요

저는 자바스크립트를 모릅니다. html과 css만 공부하였고 다른언어들은 알지 못합니다.
워드프레스 홈페이지를 제작 중, 특정 영역(div)에 있는 것만 캡쳐하는 것이 필요했습니다. 학습지 아래에서 ‘screenshot’ 버튼을 눌렀을 때 그 위의 학습지가 이미지 파일로 로컬저장이 되는 기능이요.

이것을 검색해보던 중 javascript와 html2canvas 의 도움을 받으면 기능 구현이 가능하겠다 싶어서 이리저리 검색을 해보고 시도를 해보았지만 계속해서 실패만 거듭합니다. 이미지 크기를 보아하니 뭔가 캡쳐가 이루어지기는 하는 것 같은데 내용이 보이질 않네요. 도대체 어떤 문제가 있는 것일까요? 지식이 전무하여 어디가 틀렸는지도 모르고 헤매던 중, jsdev.kr 사이트에 접속하게 되었고 실례를 무릅쓰고 질문드려요.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 화면 캡쳐 CDN -->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<body>
<!-- 캡쳐할 영역 -->
<div id="capture">
<div align="center" id="liveworksheet496440" style="width:100%"></div>
<script src="https://www.liveworksheets.com/embed/embed.js"></script>
<script language="javascript">
loadliveworksheet(496440,'sxjpkhzn',4197,'www',364161);
</script>
</div>
<button id="shot">screen shot</button> 
<script>
$(function(){
$("#shot").on("click", function(){
// 캡쳐 라이브러리를 통해서 canvas 오브젝트를 받고 이미지 파일로 리턴한다.
html2canvas(document.querySelector("#capture")).then(canvas => {
saveAs(canvas.toDataURL('image/png'),"capture.png");
});
});
function saveAs(uri, filename) {
// 캡쳐된 파일을 이미지 파일로 내보낸다.
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
window.open(uri);
}
}
});
</script>
</body>

jsfiddle에 올라온 예시가 있어서 공유드려봐요
http://jsfiddle.net/8ypxW/3/

예상하기론
html2canvas의 onrendered 이벤트에서 canvas를 꺼내야하는데
onrendered 이벤트 전에 canvase에 접근해서 그런게 아닌가 싶네요