HTML Canvas drawImage() Method copy and paste canvas sections

Introduction

To copy a section of the canvas, pass the canvas object to the drawImage() method instead of an image object: 

context.drawImage(canvas,//from w w  w .  j av a 2  s .co m
                  sourceX,
                  sourceY,
                  sourceWidth, 
                  sourceHight, 
                  sourceHeight,
                  sourceHeight, 
                  destX, 
                  destY, 
                  destWidth, 
                  destHeight);

View in separate window 

<!DOCTYPE HTML> 
<html>
    <head>
        <script>
            function drawHeart(context, x, y, width, height){
        context.save();// ww w .j a  v a2 s .  c o m
                context.beginPath();
        var topCurveHeight = height * 0.3;
                context.moveTo(x, y + topCurveHeight);
                // top left curve
                context.bezierCurveTo(
          x, y, 
          x - width / 2, y, 
          x - width / 2, y + topCurveHeight
        );
                
                // bottom left curve
                context.bezierCurveTo(
          x - width / 2, y + (height + topCurveHeight) / 2, 
          x, y + (height + topCurveHeight) / 2, 
          x, y + height
        );
                
                // bottom right curve
                context.bezierCurveTo(
          x, y + (height + topCurveHeight) / 2, 
          x + width / 2, y + (height + topCurveHeight) / 2, 
          x + width / 2, y + topCurveHeight
        );
                
                // top right curve
                context.bezierCurveTo(
          x + width / 2, y, 
          x, y, 
          x, y + topCurveHeight
        );
                
                context.closePath();
                context.fillStyle = "red";
                context.fill();
        context.restore();
            }
            
            window.onload = function(){
                // drawing canvas and context
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                
                // draw spade
                var spadeX = canvas.width / 2;
                var spadeY = 20;
                var spadeWidth = 140;
                var spadeHeight = 200;
                
                // draw spade in center of canvas
                drawHeart(context, spadeX, spadeY, spadeWidth, spadeHeight);
                
                // copy right half of the spade and then paste it 
                // on the canvas to the left of the spade
                context.drawImage(
          canvas,         
          spadeX,         // source x
          spadeY,         // source y
          spadeWidth / 2,     // source width
          spadeHeight,       // source height
          spadeX - spadeWidth,  // dest x
          spadeY,         // dest y
          spadeWidth / 2,     // dest width
          spadeHeight        // dest height
        );
                
                // copy left half of the spade and then paste it 
                // on the canvas to the right of the spade
                context.drawImage(
          canvas, 
          spadeX - spadeWidth / 2,  // source x   
          spadeY,           // source y
          spadeWidth / 2,       // source width
          spadeHeight,         // source height
          spadeX + spadeWidth / 2,   // dest x
          spadeY,           // dest y
          spadeWidth / 2,       // dest width
          spadeHeight          // dest height
        );
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>



PreviousNext

Related