Using Canvas to Draw Image

We can also use Canvas to draw the image.

Version

HTML 5

Canvas

draw000

The picture is displayed by Canvas, not by <img>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas Lab</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
  <script>
    let context = document.querySelector('#canvas').getContext('2d')

    context.canvas.width = innerWidth
    context.canvas.height = innerHeight

    let image = new Image()
    image.src = 'https://konvajs.org/assets/yoda.jpg'
    image.onload = () => context.drawImage(image, 5, 5)
  </script>
</html>

Line 9

<canvas id="canvas"></canvas>

Use HTML’s <canvas> tag to draw image
Add id to control the <canvas> tag

Line 12

let context = document.querySelector('#canvas').getContext('2d')

context.canvas.width = innerWidth
context.canvas.height = innerHeight

Use querySelector() to get canvas element, and getContext() to get its 2d context
Set Canvas’s width and height by window‘s innerWidth and innerHeight

Line 17

let image = new Image()
image.src = 'https://konvajs.org/assets/yoda.jpg'
image.onload = () => context.drawImage(image, 5, 5)

Create an image on the fly and pass it to drawImage()
When the image is created, the load event is fired. Use context‘s drawImage() to draw an image by Canvas on load event

Conclusion

We don’t have to use any packages to use Canvas API to draw the image