HTML5 Game - Drawing an image on the canvas

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Image

Description

Drawing an image on the canvas

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <style type = "text/css">
    .hidden{/*  w w w. j  a  va  2 s  .  c o  m*/
      display: none;
    }
  </style>
  <script type = "text/javascript">
  function draw(){
    let drawing = document.getElementById("drawing");
    let con = drawing.getContext("2d");
    let myPicture = document.getElementById("myPicture");
    con.drawImage(myPicture, 0, 0, 50, 50);

    let image2 = new Image();
    image2.src = "http://java2s.com/style/demo/jet.png";
    con.drawImage(image2, 100, 100, 70, 50);
  }
  </script>
</head>

<body onload = "draw()">
  <h1>Image in canvas</h1>

  <img class = "hidden"
       id = "myPicture"
       src = "http://java2s.com/style/demo/jet.png"
       alt = "jet picture" />

  <canvas id = "drawing"
          height = "400"
          width = "400">
    <p>Canvas not supported</p>
  </canvas>

</body>
</html>

Related Topic