Positioning a canvas inside a screenshot

Question

I am trying to put a canvas on that specified place. but it isn't happening. I am using javascript and uploading the image on client-side.I have tried many methods like canvas rotation, transformation. but actually, i need a little-aligned canvas or transformed a bit. I have also shared the image and also shared my js fiddle codes. so please help me in getting out this...!!!

image link here:

var input = document.getElementById('fileinput');
input.addEventListener('change', handleFiles);

function handleFiles(e) {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image;
  img.src = URL.createObjectURL(e.target.files[0]);

  img.onload = function() {
	  

  ctx.drawImage(img,10,10);  


  }
}

* {
  box-sizing: border-box;

}
.html{
	height:100%;
}
.header
 {
  background-color: grey;
  color: white;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
  height:500px;
  
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.menu {
  width: 25%;
}

.content {
  width: 75%;
  height:500px;
  background-color:red;
  background-image: url("../img/img.jpg")  ;
  background-size: 100% 100%;
  
 
  
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 8px;
  background-color: #33b5e5;
  color: #ffffff;
}

.menu li:hover {
  background-color: #0099cc;
}

  <div class="header">
  <center>
    <h1>Test</h1></center>
  <input type="file" id="fileinput" />
</div>

<div class="clearfix">
  <div class="column menu">

  </div>

  <div class="column content">
  
    <canvas width="400" height="300" id="canvas" />


  </div>
</div>

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

The answer is to use perspective in css: perspective: 1000px;

For more information on this check out: https://css-tricks.com/almanac/properties/p/perspective/. I hope this helps!