Javascript 在屏幕截图中放置画布

我正试图把画布放在那个特定的地方。但事实并非如此。 我正在使用javascript并在客户端上传图像。我尝试了很多方法，比如画布旋转、转换。但事实上，我需要一个对齐的画布或一点变形。我也分享了图片，也分享了我的js小提琴代码。所以请帮我摆脱这个

图片链接：

var input=document.getElementById（'fileinput'）；
input.addEventListener（'change'，HandleFile）；
功能手柄（e）{
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
var img=新图像；
img.src=URL.createObjectURL（e.target.files[0]）；
img.onload=函数（）{
ctx.drawImage（img，10,10）；
}
}

*{
框大小：边框框；
}
.html{
身高：100%；
}
.标题
{
背景颜色：灰色；
颜色：白色；
填充：15px；
}
.栏目{
浮动：左；
填充：15px；
高度：500px；
}
.clearfix:：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
.菜单{
宽度：25%；
}
.内容{
宽度：75%；
高度：500px；
背景色：红色；
背景图片：url（“../img/img.jpg”）；
背景大小：100%100%；
}
.菜单ul{
列表样式类型：无；
保证金：0；
填充：0；
}
李先生{
填充：8px；
边缘底部：8px；
背景色：#33b5e5；
颜色：#ffffff；
}
.菜单李：悬停{
背景色：#0099cc；
}

试验

答案是在css中使用透视图：

透视图：1000px


有关此签出的详细信息：。我希望这有帮助