HTML5 Game - Draw image from <img> tag

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

Description

Draw image from <img> tag

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <style type = "text/css">
    .hidden{//from w  w w  .j ava 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, 60, 70, 90, 90, 0, 0, 150, 150);
  }
  </script>
</head>

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

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

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

</body>
</html>

Related Topic