Dynamically take Width and height of canvas image and also create another canvas using javascript on one page

Question

I am creating a canvas using javascript with a dynamic image. Now I want to take canvas's height and width dynamically depending on the image. And as well as create another canvas on same page. Here I am attaching my code.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var _puzzleWidth = 640; var _puzzleHeight = 480; var _stage; function init(){ var canvas = document.createElement('canvas'); canvas.id = "CursorLayer"; //canvas.width = _puzzleWidth; //canvas.height = _puzzleHeight; _stage = canvas.getContext('2d'); canvas.style.border = "1px solid"; //draw(); var img = new Image(); img.onload = function(){ _stage.drawImage(img, 0, 0); } img.src = "http://lorempixel.com/output/animals-qg-640-480-3.jpg"; var body = document.getElementsByTagName("body")[0]; body.appendChild(canvas); } </script> </head> <body onload="init();"></body> </html>

Thanks in advance.

Answer 1

Try this below code:

 <!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script>
         var _puzzleWidth = 640;
         var _puzzleHeight = 480;
         var _stage;
         var _stage2;
         function init(){

         var canvas2 = document.createElement('canvas');
             canvas2.id = "CursorLayer2";

             var canvas = document.createElement('canvas');
             canvas.id = "CursorLayer";

             _stage = canvas.getContext('2d');
             canvas.style.border = "1px solid";

             _stage2 = canvas2.getContext('2d');
             canvas2.style.border = "1px solid";

             var img = new Image();
             var img1=new Image();

             img.onload = function(){
                canvas.width  = this.width;
                canvas.height = this.height;
                _stage.drawImage(img, 0, 0);
             }

             img1.onload = function(){
                 canvas2.width  = this.width;
                 canvas2.height = this.height;
                 _stage2.drawImage(img1,0,0);

             }

             img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTfSV9AGQi9c48oRysYiuSs9Bs4J3B2p4R3eh-z1hsS-Z01HD17";
             img1.src = "http://lorempixel.com/output/animals-q-g-640-480-3.jpg";

             var body = document.getElementsByTagName("body")[0];
             body.appendChild(canvas);

             var body1 = document.getElementsByTagName("body")[0];
             body1.appendChild(canvas2);
         }
      </script>
   </head>
   <body onload="init();"></body>
</html>

Dynamically take Width and height of canvas image and also create another canvas using javascript on one page

Question

1 answers

solution1
1 ACCPTED 2020-01-03 06:34:54

Dynamically take Width and height of canvas image and also create another canvas using javascript on one page

Question

1 answers

solution1 1 ACCPTED 2020-01-03 06:34:54

solution1
1 ACCPTED 2020-01-03 06:34:54