HTML5 Canvas demo

by riyamiscible

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
</head>
<body onload="loadCanvas();">
    <div class="row">
        <div class="col-12" style="text-align:center;font-size:25px;">Demo for html5 Canvas</div>
        <div class="col-12">
        <hr>
        </div>
        <div class="col-6" style="text-align:center"><div class="btn btn-primary btn-lg" onclick="copyimage();">Copy Image</div><br>
          <canvas id="mycanvas" width="300" height="450"></canvas>
        </div>
        <div class="col-6" style="text-align:center;"><div class="btn btn-danger btn-lg">Delete Image</div>
        <div class="imagecopy">
            Copied image will be shown here
        </div>
        </div>
    </div>
    <input type="text" id="dataurl" />
</body>
</html>

CSS

.imagecopy{
  width:300px;
  height:450px;
  border:1px solid grey;
}

JavaScript

function loadCanvas(){
 var c = document.getElementById("mycanvas");
 var ctx = c.getContext("2d");
 
   var img = new Image();
   img.crossOrigin = 'anonymous';
   img.addEventListener("load", () => {
   ctx.drawImage(img, 0, 0, 300, 450);
		//var dataURL = c.toDataURL("image/jpeg");
    //$("#dataurl").val(dataURL);
   
    });
    img.src = 'https://images.squarespace-cdn.com/content/v1/592df00e3a0411d38a6c0e88/1508276785945-S2PHOFE36SU6NN6K8F3Y/70db5-sunsetideahousesunsetideahouse.jpg';
 }
 
 function copyimage(){
 var c = document.getElementById("mycanvas");
 //var datanew = $("#dataurl").val();
 var datanew = c.toDataURL("image/jpeg");

 $(".imagecopy").html('<img src="'+datanew+'" width="300px" height="450px" />');
 }