HTML5 Game - Canvas Crop image

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

Description

Crop image

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Cropped Picture</title>

  <style>
canvas {//ww w . j  a v  a  2s. c om
  border: 1px dashed black;
}

img {
  display: none;
}
  </style>

  <script>
 
window.onload = function() {
  let canvas = document.getElementById("drawingCanvas");
  let context = canvas.getContext("2d");

  let img = document.getElementById("portrait");
  context.drawImage(img, 0, 0, 200, 100, 75, 25, 20, 10);
};

  </script>
</head>

<body>
  <canvas id="drawingCanvas" width="300" height="200"></canvas>
  <img id="portrait" src="http://java2s.com/style/download.png">
</body>
</html>

Related Topic