Crop Canvas / Export HTML5 Canvas with certain width and height

HTML5 canvas allows the users to draw or create 2D graphics in any web page. Suppose you want to crop a part of the canvas created on the web page and export it to any other area of the web page, then you can do it using javascript. For example, you have an image in the canvas and you want to export a part of image of dimension 400px * 260px.

In this article, we will learn how to execute the above using few javascript codes.

To learn further, let us first considering understanding what HTML5 Canvas is

What is HTML5 canvas?

HTML5 is a rectangular container on a web page which contains 2D graphics as drawn by the user using javascript. By default, a canvas does not have any border or content.

height and width attribute is used to define the size of the canvas. Use of style attribute allows us to design the border of the canvas.

Syntax

<canvas> </canvas>

Example

<canvas id=” demo" width="100%" height="100%"></canvas>     

Note - id attribute should be specified so that it can be referred in the Javascript codes.

How to crop a HTML5 canvas?

One of the methods is to create a secondary canvas to draw onto from the original canvas. This secondary canvas will have the dimensions which you want to crop from the original canvas. However, a user will not be able to see this secondary canvas. We can choose to use toDataUrl() on the secondary canvas to convert it into an url.

For instance, the following code will demonstrate this method -

Example

<canvas> </canvas>
<script>
   (function(){
      var myCanvas = document.getElementsByTagName("canvas");
      var content = myCanvas[0].getContext("2d");
      var data = content.getImageData(0, 0, myCanvas[0].width, canvas[0].height);
      var operation = content.globalCompositeOperation;
			
      content.globalCompositeOperation = "destination-over";
      content.fillStyle = "#FFFF00";
      content.fillRect(0,0,myCanvas[0].width, myCanvas[0].height);

      var secCanvas = document.createElement("myCanvas"),
      tCtx = secCanvas.getContext("2d");

      secCanvas.width = 560;
      secCanvas.height = 420;
      tCtx.drawImage(myCanvas[0],0,0);

      var img = secCanvas.toDataURL("image/png");
      document.write('<a href=" '+img+' "><img src=" '+img+' "/></a>');
   })?
</script> 

Where,

getElementByTagName is a method of document interface which returns the elements with the given tag name written in HTML.

Example

getElementByTagName(h2), getElementByTagName(body)

In the above code, it is used to access the elements of canvas element

myCanvas[0].getContext("2d")

.getContext() is used to get the drawing context on the canvas.

“2d” is a context type which allows creation of 2-dimensional context.

The above code is used to get the context of the canvas.

.getImageData()

It is used to return the data of the cropped portion of the canvas.

Syntax

getImageData(x, y, w, h)

Parameter

• x - x-axis coordinate of the top-left corner of the box from which data needs to be taken.

• y - y-axis coordinate of the top-left corner of the box from which data needs to be taken.

• w - width of the box

• h - height of the box

Example

demo.getImageData( 0, 23, 100, 200)

.globalCompositeOperation is a property of Canvas which allows us to set how to draw new graphics like shapes, images etc., on the canvas.

Some of the modes are source-over (by default), source-in, destination-in, destination-over, lighter, copy etc.,

In our code, we have used destination-over which means the destination which is already present on the canvas) is drawn over the source (which is to be drawn on the canvas).

Example

demo.globalCompositeOperation = “source- out”

.fillstyle is used to set the color of a portion in the canvas. In our code it is used so that the portion to be exported becomes yellow in color.

Example

demo.fillstyle = “#FFFFFF”

.fillRect() is a method used to draw a rectangle or a box which is filled according to fillstyle specified.

Syntax

fillRect(x, y, w, h)

Parameter

• x - x- axis coordinate of the box’s starting point

• y - y-axis coordinate of the box’s starting point.

• w - width of the box

• h - height of the box

.createElement is used to create an element using Javascript

Syntax

document.createElement( type)

Parameter

type is the type of element you want to create.

Example

document.createElement

for creating a button

document.createElement 

for creating a paragraph

secCanvas.width = 560;
secCanvas.height = 420;

The above lines of code specify the height and width of the secondary canvas which we want to draw.

.drawImage method is used to draw an image or a canvas on the current canvas.

Syntax

drawImage (cropping image, X- coordinate of source, Y- coordinate of source, source width, source height, X- coordinate of destination image, Y coordinate of destination image, destion image’s width, destination image’s height). 

Example

demo.drawImage ( img, 12, 10, 300, 250, 0, 0, 100, 200);

.toDataUrl is used to convert the canvas drawing into an url.

Let’s see another example to make it even more clear. In this example, we have an image from which we will crop out a certain portion of it.

<body>
   <h2> Image</h2>
   <img id= “image” src= “ ” >
   <h2> Cropped portion</h2>
   <canvas id="Canvas" width="480" height="100" 
      style="border:3px #FFFF00 solid">
   </canvas>
   <script>
      window.onload = function () {
         var myCanvas = document.getElementById("Canvas");
         var context = myCanvas.getContext("2d");
         var pic = document.getElementById("Image");
         context.drawImage(pic, 16, 60, 
         200, 160, 0, 0, 90, 110);
      }
   </script>
</body>

Conclusion

Images are a significant part of any website. A website devoid of images is quite unattractive despite having a nice design. So, it is important for the developers to know about styling the images in their website for etter user experience. HTML5 canvas can be used to crop an image. This can be done using drawImage() method. Also if you want to make an url for the cropped part of the image, use .toDataUrl method.