Canvas tag reflection effect - HTML Snipplr Social Repository

Revision: 21485

at December 14, 2009 16:12 by arpit

Initial Code

function drawCD() {
  var g2 = document.getElementById("cdCover").getContext("2d");

  g2.save();
  g2.translate(0, cdCase.height * 2 - 1);
  g2.scale(1, -1);

  g2.beginPath();
  g2.moveTo(0, cdCase.height / 2);
  g2.lineTo(cdCase.width, cdCase.height / 2);
  g2.lineTo(cdCase.width, cdCase.height + 1);
  g2.lineTo(0, cdCase.height + 1);
  g2.clip();

  g2.drawImage(cover, 19, 3, 240, 227);
  g2.drawImage(reflections, 0, 0);
  g2.drawImage(stitch, 19, 3);
  g2.drawImage(cdCase, 0, 0);

  g2.globalCompositeOperation = "destination-out";
  var alphaMask = g2.createLinearGradient(0, cdCase.height / 2, 0, cdCase.height);
  alphaMask.addColorStop(0, "rgba(255, 255, 255, 1.0)");
  alphaMask.addColorStop(1.0, "rgba(255, 255, 255, 0.5)");
  g2.fillStyle = alphaMask;
  g2.fillRect(0, cdCase.height / 2, cdCase.width, cdCase.height / 2);

  g2.restore();

  g2.drawImage(cover, 19, 3, 240, 227);
  g2.drawImage(reflections, 0, 0);
  g2.drawImage(stitch, 19, 3);
  g2.drawImage(cdCase, 0, 0);
}

Initial URL

http://ajaxian.com/archives/killer-effects-with-canvas

Initial Description

Initial Title

Canvas tag reflection effect

Initial Tags

iphone

Initial Language

HTML

Choose a language for easy browsing: