Share via

Using Canvas to Make Photos into Shapes

  • Article

This topic explains how you can use HTML5 Canvas to put photographs into different shapes and create visual special effects for web designs.

  • Canvas Code Sample
  • Canvas Code Sample Discussion
  • Body Code
  • Script Code
    • displayImage Function
    • changeImage Function
  • Code Requirements
  • Related topics

This topic includes a stand-alone annotated code sample that shows how to put a photograph of an American Kestral falcon into a circle shape. The code sample demonstrates how to use Canvas to load the falcon photograph and display it on the screen. Then it shows how to create a circle by using the Canvas arc method and add a white circular frame around the bird. The discussion material at the end of this sample will explain more about how the code works to develop this technique.

Canvas Code Sample

<!DOCTYPE html>
<html>
  
  <head>
    <script type="text/javascript">
    
      //Global variables
      var myImage = new Image(); // Create a new blank image.
      
      // Load the image and display it.
      function displayImage() {

        // Get the canvas element.
        canvas = document.getElementById("myCanvas");

        // Make sure you got it.
        if (canvas.getContext) {

          // Specify 2d canvas type.
          ctx = canvas.getContext("2d");

          // When the image is loaded, draw it.
          myImage.onload = function() {

            // Load the image into the context.
            ctx.drawImage(myImage, 0, 0);

            // Get and modify the image data.
            changeImage();
          }

          // Define the source of the image.
          myImage.src = "http://samples.msdn.microsoft.com/workshop/samples/canvas/kestral.png";
        }
      }

      function changeImage() {

        ctx.strokeStyle = "white";
        ctx.lineWidth = "100";
        ctx.beginPath();
        ctx.arc(100, 100, 150, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.stroke();
      }
    </script>
  </head>
  
  <body onload="displayImage()">
    <h1>
      American Kestral
    </h1>
    <p>
      The original image is on the left and the modified image is on the right.
    </p>
    <img id="myPhoto" src="http://samples.msdn.microsoft.com/workshop/samples/canvas/kestral.png">
    <canvas id="myCanvas" width="200" height="200">
    </canvas>
    <p>
      Public domain image courtesy of U.S. Fish and Wildlife Service.
    </p>
  </body>

</html>

Canvas Code Sample Discussion

This discussion explains the design and structure of this Canvas code sample and how all the parts work together. The sample uses a standard HTML5 header, <!doctype html>, so that browsers can distinguish it as part of the HTML5 specification. This code is divided into two major parts:

  • Body Code
  • Script Code

Body Code

The body tag uses the onload function to call the displayImage function when the page is loaded. An original image of a kestral is loaded into the body so you can compare it to the one that will be modified by Canvas. The canvas tag is part of the body. The initial width and height of the Canvas is specified, as is the id attribute. The ID is required so that the canvas element can be added to the object model of the page.

Script Code

The script code includes two functions: displayImage and getColorData. The displayImage function is called when the page is loaded. The getColorData function is called from displayImage. A global variable is created at the beginning of the script section to create an empty image file, which will be used later.

displayImage Function

This function is called on page load. It gets the canvas by using the ID of the canvas element in the body code. It then gets the CanvasRenderingContext2D object of the canvas, making it ready to accept drawing and uses DrawImage to load the image into the context. After the context is initialized as a 2-D canvas, you can start drawing on the canvas.

The last thing the function does is to specify the source of the image by supplying a path. Because images might not load instantly, an event is set up that will call a function when the image actually gets loaded. After the image is loaded, it is displayed and a call is made to the changeImage function, which finishes the drawing work.

changeImage Function

The image is modified by drawing a circle around the center of the image, by using the arc method. The image is 200 × 200 pixels, and the radius of the circle will be 150 pixels. Because the circle's center is at the center of the image, and the circle border is 100 pixels thick, the pixels on the outer edges are replaced with white ones. The strokeStyle property, lineWidth property, beginPath method, arc method, closePath method, and stroke method define the circle.

Code Requirements

This code runs in Windows Internet Explorer 9. It does not work in earlier versions of Windows Internet Explorer but might run in other browsers that support HTML5 Canvas.

How to Create Canvas Special Effects