Languages
[Edit]
EN

JavaScript - get only certain part of canvas

0 points
Created by:
Walter
586

In this article, we would like to show you how to get only a certain part of canvas using JavaScript

Quick solution:

var canvas = document.querySelector('#canvas-id');
var context = canvas.getContext('2d');
context.drawImage(image, dx, dy);

or:

var canvas = document.querySelector('#canvas-id');
var context = canvas.getContext('2d');
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

 

Practical examples

1. Using drawImage() with three arguments

In this example, we use drawImage() method with three arguments so we can get part of the canvas and place its upper-left corner into the dx, dy coordinates.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    #my-canvas { border: 1px solid gray; }

  </style>
</head>
<body>
  <img id="image" src="https://dirask.com/static/bucket/1633539280748-ymAGm6LYq6--image.png" />
  <br>
  <canvas id="my-canvas" width="300" height="300"></canvas>
  <script>

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');

    var image = document.querySelector('#image');

    image.onload = function() {
        context.drawImage(image, 50, 100); // drawImage(image, dx, dy)
    };

    image.onerror = function() {
        context.fillStyle = 'red';
        context.font = '16px Arial';
        context.fillText('Image loading error!', 10, 30);
    };

  </script>
</body>
</html>

Result:

JavaScript - get only certain part of canvas
JavaScript - get only certain part of canvas

3. Using drawImage() with nine arguments

With this approach, we are able to specify the parameters of the part that we want to get, where we want to place it and its size on the destination canvas. 

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    #my-canvas { border: 1px solid gray; }

  </style>
</head>
<body>
  <img id="image" src="https://dirask.com/static/bucket/1633539280748-ymAGm6LYq6--image.png" />
  <br>
  <canvas id="my-canvas" width="300" height="300"></canvas>
  <script>

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');

    var image = document.querySelector('#image'); // 440px x 175px

    image.onload = function() {
        context.drawImage(image, 20, 25, 110, 120, 50, 80, 110, 120);
    };

    image.onerror = function() {
        context.fillStyle = 'red';
        context.font = '16px Arial';
        context.fillText('Image loading error!', 10, 30);
    };

  </script>
</body>
</html>

Result:

JavaScript - get only certain part of canvas
JavaScript - get only certain part of canvas

References

  1. CanvasRenderingContext2D.drawImage() - Web APIs | MDN

Alternative titles

  1. JavaScript - get only certain part of HTML canvas element
  2. JavaScript - save only certain part of HTML canvas element
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

JavaScript - HTML5 canvas tutorial

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join