Canvas Images | WeAnswer



<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
      imageObj.onload = function() {
        context.drawImage(imageObj, 100, 50);
      };
      imageObj.src = 'http://www.weanswer.xyz/wp-content/uploads/2017/12/demo.jpg';
    </script>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var imageObj = new Image();

imageObj.onload = function() {

context.drawImage(imageObj, 100, 50);

};

imageObj.src = 'http://www.weanswer.xyz/wp-content/uploads/2017/12/demo.jpg';

</script>

</body>

</html>



<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = 20;
      var y = 30;
      var width = 200;
      var height = 113;
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, x, y, width, height);
      }
      imageObj.src = 'http://www.weanswer.xyz/wp-content/uploads/2017/12/demo.jpg';
    </script>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var x = 20;

var y = 30;

var width = 200;

var height = 113;

var imageObj = new Image();

imageObj.onload = function() {

context.drawImage(imageObj, x, y, width, height);

}

imageObj.src = 'http://www.weanswer.xyz/wp-content/uploads/2017/12/demo.jpg';

</script>

</body>

</html>



<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        // draw cropped image
        var sourceX = 150;
        var sourceY = 0;
        var sourceWidth = 150;
        var sourceHeight = 150;
        var destWidth = sourceWidth;
        var destHeight = sourceHeight;
        var destX = canvas.width / 2 - destWidth / 2;
        var destY = canvas.height / 2 - destHeight / 2;

        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
      };
      imageObj.src = 'http://www.weanswer.xyz/wp-content/uploads/2017/12/demo.jpg';
    </script>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var imageObj = new Image();

imageObj.onload = function() {

// draw cropped image

var sourceX = 150;

var sourceY = 0;

var sourceWidth = 150;

var sourceHeight = 150;

var destWidth = sourceWidth;

var destHeight = sourceHeight;

var destX = canvas.width / 2 - destWidth / 2;

var destY = canvas.height / 2 - destHeight / 2;

context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

};

imageObj.src = 'http://www.weanswer.xyz/wp-content/uploads/2017/12/demo.jpg';

</script>

</body>

</html>



<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var sources = {
        img1: 'http://www.weanswer.xyz/wp-content/uploads/2017/12/demo2.png',
        img2: 'http://www.weanswer.xyz/wp-content/uploads/2017/12/demo.jpg'
      };

      loadImages(sources, function(images) {
        context.drawImage(images.img1, 10, 30, 200, 200);
        context.drawImage(images.img2, 210, 55, 200, 113);
      });

    </script>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

function loadImages(sources, callback) {

var images = {};

var loadedImages = 0;

var numImages = 0;

// get num of sources

for(var src in sources) {

numImages++;

}

for(var src in sources) {

images[src] = new Image();

images[src].onload = function() {

if(++loadedImages >= numImages) {

callback(images);

}

};

images[src].src = sources[src];

}

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var sources = {

img1: 'http://www.weanswer.xyz/wp-content/uploads/2017/12/demo2.png',

img2: 'http://www.weanswer.xyz/wp-content/uploads/2017/12/demo.jpg'

};

loadImages(sources, function(images) {

context.drawImage(images.img1, 10, 30, 200, 200);

context.drawImage(images.img2, 210, 55, 200, 113);

});

</script>

</body>

</html>

Canvas Image

Result

Canvas Image Size

Result

Canvas Image Crop

Result

Canvas Image Loader

Result

WeAnswer

Amazing html canvas examples

html5 capture image from camera

Canvas Element

How to set EC2 Ubuntu default password

CPU & Memory usage in PHP

Install PHP mcrypt extension on Ubuntu

How to reset or change the MySQL root password?

Canvas Image

Result

Canvas Image Size

Result

Canvas Image Crop

Result

Canvas Image Loader

Result

Leave a Reply Cancel reply

More Stories

You may have missed