HTML5 Canvas: Cropping an image

This entry is part 16 of 17 in the series HTML5 Canvas

Using the drawImage method, we can have the image cropped.

The cropping properties are the start X and Y positions in theĀ image and the width and height of the cropping frame.

Syntax:

ontext.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Cropping an image</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='canvas' width='640' height='480'></canvas>
<script>
    var canvas = document.getElementById('canvas').getContext('2d');
    var canvasImage = new Image();
    function cropImage() {
        canvas.drawImage(canvasImage,
                0, // position X inside the crop
                0, // position Y inside the crop
                457, // source image width
                343, // source image height
                110, //crop position X
                110, //crop position Y
                250, //crop width
                250 //crop height
        );
    }
    canvasImage.addEventListener('load', cropImage, false);
    canvasImage.src = 'https://codecrawl.com/code/images/ushuaia.jpg';
</script>
</body>
</html>

The original jpg image without cropping is located in this link.

 

HTML5 Canvas: Using an image to fill the canvas background

This entry is part 17 of 17 in the series HTML5 Canvas

The canvas API provides a way for us to fill the background with an image.

Using the createPattern method, you canĀ use an image to fill the background of a shape.

Syntax:

Context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Image in canvas</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='canvas' width='640' height='480'></canvas>
<script>
    var canvas = document.getElementById('canvas').getContext('2d');
    var canvasImage = new Image();
    function createImagePattern() {
        var pattern = canvas.createPattern(canvasImage, 'repeat');
        canvas.rect(0, 0, 640, 480);
        canvas.fillStyle = pattern;
        canvas.fill();
    }
        canvasImage.addEventListener('load',createImagePattern,false);
    canvasImage.src = 'https://codecrawl.com/code/images/ushuaia1.jpg';
</script>
</body>
</html>

The repeat parameter can have the following values:

  • repeat: Repeats the pattern horizontally and vertically
  • repeat-x: Repeats the pattern horizontally
  • repeat-y: Repeats the pattern vertically
  • no-repeat: Does not repeat the pattern