HTML5 Game - Draw image from image elements

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

Description

Draw image from image elements

Demo

ResultView the demo in separate window 

<!doctype html>  
<html>  
 <head>  
  <meta charset="utf-8">  
  <title>Embed Image</title>  
  <style>canvas{border:1px solid red;}</style>  
  <style>  
  #picture {  //from   www  .  j  ava2s.c  o  m
    display: none;  
  }  
  </style>  
 </head>  
 <body>  
  <canvas id="canvas" width="400" height="400"></canvas>  
  <img id="picture" src="http://java2s.com/style/demo/jet.png">  
  <script>  
  window.onload = function () {  
    let canvas = document.getElementById('canvas'),  
        context = canvas.getContext('2d'),  
        image = document.getElementById('picture');  
      
    context.drawImage(image, 0, 0);  
  };  
  </script>  
 </body>  
</html>

Related Topic