2

I've two images, first is large image which is placed first and then another image is placed on it. Now I want to cut out area of second image over the first.

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var first_img = new Image(),
      second_img = new Image();



   first_img.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
   second_img.src = 'http://tux.crystalxp.net/png/mimipunk-tux-cartoon-1820.png';

      var draw = function(){


          second_img.onload = function() {
            context.drawImage(second_img, 50, 50);
          };

          first_img.onload = function() {
            context.drawImage(first_img, 50, 50);
          };


      };

      draw();

Here is the fiddle.

edit second image is png and have irregular shape, I want the first image having transparency of area of the first image

MZH
  • 1,414
  • 4
  • 29
  • 57
  • I think this is what u are looking for, http://stackoverflow.com/questions/18379818/html5-canvas-image-masking-overlapping I hope this helps – Sensei May 05 '14 at 09:23

1 Answers1

0

The drawImage function provides parameter for that

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#drawImage()

Luketep
  • 181
  • 1
  • 9
  • the second image is png, the drawImage func don't take any parameter like that. I don't think it will work. can u pls pointout more in depth – MZH May 05 '14 at 09:05