canvas 如何实现固定区域内旋转、拖拽、伸缩？

请假各位，canvas 如何实现固定区域内旋转、拖拽、伸缩？
1、canvas如果现在只在固定区域进行推着，超出固定区域不显示。
2、如果图片原始周围出现操作按钮如下图：
3、实现下图功能，都需要什么属性
4、不使用框架，因为后续要把代码迁移到小程序端，小程序不识别外部js。

下图是想要实现的效果：有辅助线、操作按钮、区域边框

img

下图是我已实现的代码、和效果图


<!DOCTYPE HTML>
<html>
<body>

<canvas  id="myCanvas" width="450" height="514"></canvas>
<img id="scream" src="images/zheng.png" style="display: none;">

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
var img=document.getElementById("scream");

img.onload = function()
{
    ctx.drawImage(img,0,0,450,512);
}



</script>

</body>
</html>

img

save后clip再变换绘图再restore